Modal image

Bootstrap 5 Modal image component

Responsive Modal image built with Bootstrap 5. Modal image is a responsive gallery with the option to enlarge selected photos or videos.


Basic example

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

        
            
            <div class="lightbox" data-mdb-lightbox-init>
              <div class="row">
                <div class="col-lg-4">
                  <img 
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp" 
                    alt="Table Full of Spices"
                    class="w-100"
                  />
                </div>
                <div class="col-lg-4">
                  <img 
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
                    alt="Winter Landscape"
                    class="w-100"
                  />
                </div>
                <div class="col-lg-4">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
                    alt="View of the City in the Mountains"
                    class="w-100"
                  />
                </div>
              </div>
            </div>