Gallery

Bootstrap Gallery - examples & tutorial

A stunning collection of responsive galleries created with the latest Bootstrap 5. Image gallery, video gallery, photo gallery, full-page, eCommerce, lightbox, slider, thumbnails, and many more.


Static images

An example with the usage of static images.

To learn more read Images Docs.


          <!-- Gallery -->
          <div class="row">
            <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
              <img
                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg"
                class="w-100 shadow-1-strong rounded mb-4"
                alt=""
              />

              <img
                src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg"
                class="w-100 shadow-1-strong rounded mb-4"
                alt=""
              />
            </div>

            <div class="col-lg-4 mb-4 mb-lg-0">
              <img
                src="https://mdbootstrap.com/img/Photos/Vertical/mountain2.jpg"
                class="w-100 shadow-1-strong rounded mb-4"
                alt=""
              />

              <img
                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg"
                class="w-100 shadow-1-strong rounded mb-4"
                alt=""
              />
            </div>

            <div class="col-lg-4 mb-4 mb-lg-0">
              <img
                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                class="w-100 shadow-1-strong rounded mb-4"
                alt=""
              />

              <img
                src="https://mdbootstrap.com/img/Photos/Vertical/mountain3.jpg"
                class="w-100 shadow-1-strong rounded mb-4"
                alt=""
              />
            </div>
          </div>
          <!-- Gallery -->
        





Lightbox

If you need advanced options you can use MDBootstrap LightBox component.

Note: This component requires MDBootstrap Pro package.


          <div class="lightbox">
            <div class="row">
              <div class="col-lg-6">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"
                  data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.jpg"
                  alt="Lightbox image 1"
                  class="w-100 mb-2 mb-md-4 shadow-1-strong rounded"
                />
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Square/1.jpg"
                  data-mdb-img="https://mdbootstrap.com/img/Photos/Square/1.jpg"
                  alt="Lightbox image 2"
                  class="w-100 shadow-1-strong rounded"
                />
              </div>
              <div class="col-lg-6">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Vertical/1.jpg"
                  data-mdb-img="https://mdbootstrap.com/img/Photos/Vertical/1.jpg"
                  alt="Lightbox image 3"
                  class="w-100 shadow-1-strong rounded"
                />
              </div>
            </div>
          </div>
        





If you want to support our friends from Tailwind Elements you can also check out the Tailwind gallery documentation.