Lightbox

Bootstrap lightbox

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

A Bootstrap lightbox is a group of images combined in one responsive gallery. Elements are grouped in a thumbnail grid, which can be displayed as a slideshow.


Basic example

A basic example of a lightbox with the most common use case with the bootstrap grid.

Example code:

        
            

        <div class="row">
          <div class="col-md-12">
            <div id="mdb-lightbox-ui"></div>
            <div class="mdb-lightbox no-margin">
              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(117).webp" class="img-fluid">
                </a>
              </figure>
              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(98).webp" class="img-fluid" />
                </a>
              </figure>
              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).webp" class="img-fluid" />
                </a>
              </figure>
              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(123).webp" class="img-fluid" />
                </a>
              </figure>
              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(118).webp" class="img-fluid" />
                </a>
              </figure>
              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(128).webp" class="img-fluid" />
                </a>
              </figure>
              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).webp" class="img-fluid" />
                </a>
              </figure>
              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).webp" class="img-fluid" />
                </a>
              </figure>
              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(133).webp" class="img-fluid" />
                </a>
              </figure>
            </div>
          </div>
        </div>
      
      
        
    
        
            

          // MDB Lightbox Init
          $(function () {
            $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
          });
  
        
        
    

Initialization required

To use our Lightbox you have to initialize it in your project with the code below.

Initialization code:

        
            

        // MDB Lightbox Init
        $(function () {
          $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
        });

      
        
    

Predefined image size

A MDB LightBox uses the same image in two different sizes: thumbnail and large.

Such an approach let you increase the performance of your website.

        
            

        <figure class="col-md-4">
          <!--Large image-->
          <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(114).webp" data-size="1600x1067">
            <!-- Thumbnail-->
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(114).webp" class="img-fluid">
          </a>
        </figure>
      
        
    
        
            

          // MDB Lightbox Init
          $(function () {
            $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
          });
  
        
        
    

Important:

1. The data-size attribute should equal the size of the Large Image

2. The Thumbnail and Large images should have the same ratio

3. The Thumbnail should be 544px wide

4. The Large image shouldn't be wider than 1800px

        
            

        <div class="row">
          <div class="col-md-12">

            <div id="mdb-lightbox-ui"></div>

            <div class="mdb-lightbox no-margin">

              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(117).webp" class="img-fluid">
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(98).webp" class="img-fluid" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).webp" class="img-fluid" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(123).webp" class="img-fluid" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(118).webp" class="img-fluid" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(128).webp" class="img-fluid" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).webp" class="img-fluid" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).webp" class="img-fluid" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).webp" data-size="1600x1067">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(133).webp" class="img-fluid" />
                </a>
              </figure>

            </div>

          </div>
        </div>

      
        
    
        
            

          // MDB Lightbox Init
          $(function () {
            $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
          });