clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

How To Use Lightbox In Bootstrap 3

  Sumit Dey Sarkar
  11 Sep 2022
  Bootstrap
Imperial Advance Hero Image

How To Use Lightbox In Bootstrap 3

In this tutorial we will learn how to use lightbox in bootstrap 3.

Let's see example - 

How To Use Lightbox In Bootstrap 3

<!DOCTYPE html>
<html>
<head>
  <title>How to use lightbox in bootstrap 3</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.js"></script>
  <style type="text/css">
    .lightbox{
      z-index: 1041;
    }
    .small-img{
      width: 100px;height: 100px;
    }
  </style>
</head>
<body>


<div class="container">
  <h2>How to use lightbox in bootstrap 3</h2>

  <a data-toggle="lightbox" href="#LightBoxArea">
    <img src="https://www.teknowize.com/attachments/file_1662886530.png" class="image iin small">
  </a>
  <div id="LightBoxArea" class="lightbox fade"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class='lightbox-dialog'>
        <div class='lightbox-content'>
            <img src="https://www.teknowize.com/attachments/file_1662886530.png">
            <div class='lightbox-caption'>
                Image 1
            </div>
        </div>
    </div>
  </div>


  <a data-toggle="lightbox" href="#demoLightbox2">
    <img src="https://www.teknowize.com/attachments/file_1662886577.png" class="image iin small">
  </a>
  <div id="demoLightbox2" class="lightbox fade"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class='lightbox-dialog'>
        <div class='lightbox-content'>
            <img src="https://www.teknowize.com/attachments/file_1662886577.png">
            <div class='lightbox-caption'>
                Image 2
            </div>
        </div>
    </div>
  </div>
 

</div>


</body>
</html>

 

Output

jQuery