Gallery

Bootstrap Gallery

Bootstrap's gallery is a great UI element perfect for introducing your visitors to a number of images, videos or other media files.

Easy to construct in a form of a lightbox gallery, multi-item carousel or slides with a caption.

Examples of Bootstrap gallery use include:

  • The most popular paintings on a museum website
  • Landscape photos in traveling blog
  • The best pieces of work in a portfolio

All of the above can be easily created by following those examples:

Gallery with image filtering MDB Pro component

Edit in sandbox 
        
            

        <!-- Grid row -->
        <div class="row">

          <!-- Grid column -->
          <div class="col-md-12 d-flex justify-content-center mb-5">

            <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="all">All</button>
            <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="1">Mountains</button>
            <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="2">Sea</button>

          </div>
          <!-- Grid column -->

        </div>
        <!-- Grid row -->

        <!-- Grid row -->
        <div class="gallery" id="gallery">

          <!-- Grid column -->
          <div class="mb-3 pics animation all 2">
            <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).webp" alt="Card image cap">
          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="mb-3 pics animation all 1">
            <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.webp" alt="Card image cap">
          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="mb-3 pics animation all 1">
            <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain2.webp" alt="Card image cap">
          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="mb-3 pics animation all 2">
            <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).webp" alt="Card image cap">
          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="mb-3 pics animation all 2">
            <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).webp" alt="Card image cap">
          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="mb-3 pics animation all 1">
            <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain3.webp" alt="Card image cap">
          </div>
          <!-- Grid column -->

        </div>
        <!-- Grid row -->

      
        
    
        
            

      .gallery {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-width: 33%;
        -moz-column-width: 33%;
        column-width: 33%;
      }
      
      .gallery .pics {
        -webkit-transition: all 350ms ease;
        transition: all 350ms ease;
      }
      
      .gallery .animation {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
      }
      
      @media (max-width: 450px) {
        .gallery {
          -webkit-column-count: 1;
          -moz-column-count: 1;
          column-count: 1;
          -webkit-column-width: 100%;
          -moz-column-width: 100%;
          column-width: 100%;
        }
      }
      
      @media (max-width: 400px) {
        .btn.filter {
          padding-left: 1.1rem;
          padding-right: 1.1rem;
        }
      }

      
        
    
        
            

        $(function() {
          var selectedClass = "";
          $(".filter").click(function(){
            selectedClass = $(this).attr("data-rel");
            $("#gallery").fadeTo(100, 0.1);
            $("#gallery div").not("."+selectedClass).fadeOut().removeClass('animation');
            setTimeout(function() {
              $("."+selectedClass).fadeIn().addClass('animation');
              $("#gallery").fadeTo(300, 1);
            }, 300);
          });
        });

Gallery with modals MDB Pro component

video
video
video
video
video
video
Edit in sandbox 
        
            

        <!-- Grid row -->
        <div class="row">

          <!-- Grid column -->
          <div class="col-lg-4 col-md-12 mb-4">

            <!--Modal: Name-->
            <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                  <!--Body-->
                  <div class="modal-body mb-0 p-0">

                    <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U"
                        allowfullscreen></iframe>
                    </div>

                  </div>

                  <!--Footer-->
                  <div class="modal-footer justify-content-center">
                    <span class="mr-4">Spread the word!</span>
                    <a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a>
                    <!--Twitter-->
                    <a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
                    <!--Google +-->
                    <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
                    <!--Linkedin-->
                    <a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>

                    <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                  </div>

                </div>
                <!--/.Content-->

              </div>
            </div>
            <!--Modal: Name-->

            <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-1.webp" alt="video"
                data-toggle="modal" data-target="#modal1"></a>

          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-lg-4 col-md-6 mb-4">

            <!--Modal: Name-->
            <div class="modal fade" id="modal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                  <!--Body-->
                  <div class="modal-body mb-0 p-0">

                    <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/wTcNtgA6gHs"
                        allowfullscreen></iframe>
                    </div>

                  </div>

                  <!--Footer-->
                  <div class="modal-footer justify-content-center">
                    <span class="mr-4">Spread the word!</span>
                    <a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a>
                    <!--Twitter-->
                    <a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
                    <!--Google +-->
                    <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
                    <!--Linkedin-->
                    <a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>

                    <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                  </div>

                </div>
                <!--/.Content-->

              </div>
            </div>
            <!--Modal: Name-->

            <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-2.webp" alt="video"
                data-toggle="modal" data-target="#modal6"></a>

          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-lg-4 col-md-6 mb-4">

            <!--Modal: Name-->
            <div class="modal fade" id="modal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                  <!--Body-->
                  <div class="modal-body mb-0 p-0">

                    <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM"
                        allowfullscreen></iframe>
                    </div>

                  </div>

                  <!--Footer-->
                  <div class="modal-footer justify-content-center">
                    <span class="mr-4">Spread the word!</span>
                    <a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a>
                    <!--Twitter-->
                    <a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
                    <!--Google +-->
                    <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
                    <!--Linkedin-->
                    <a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>

                    <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                  </div>

                </div>
                <!--/.Content-->

              </div>
            </div>
            <!--Modal: Name-->

            <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-3.webp" alt="video"
                data-toggle="modal" data-target="#modal4"></a>

          </div>
          <!-- Grid column -->

        </div>
        <!-- Grid row -->

        <!-- Grid row -->
        <div class="row">

          <!-- Grid column -->
          <div class="col-lg-4 col-md-12 mb-4">

            <!--Modal: Name-->
            <div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                  <!--Body-->
                  <div class="modal-body mb-0 p-0">

                    <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/GUEZCxBcM78"
                        allowfullscreen></iframe>
                    </div>

                  </div>

                  <!--Footer-->
                  <div class="modal-footer justify-content-center">
                    <span class="mr-4">Spread the word!</span>
                    <a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a>
                    <!--Twitter-->
                    <a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
                    <!--Google +-->
                    <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
                    <!--Linkedin-->
                    <a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>

                    <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                  </div>

                </div>
                <!--/.Content-->

              </div>
            </div>
            <!--Modal: Name-->

            <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-4.webp" alt="video"
                data-toggle="modal" data-target="#modal2"></a>

          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-lg-4 col-md-6 mb-4">

            <!--Modal: Name-->
            <div class="modal fade" id="modal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                  <!--Body-->
                  <div class="modal-body mb-0 p-0">

                    <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PjGkVCAo8Fw"
                        allowfullscreen></iframe>
                    </div>

                  </div>

                  <!--Footer-->
                  <div class="modal-footer justify-content-center">
                    <span class="mr-4">Spread the word!</span>
                    <a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a>
                    <!--Twitter-->
                    <a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
                    <!--Google +-->
                    <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
                    <!--Linkedin-->
                    <a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>

                    <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                  </div>

                </div>
                <!--/.Content-->

              </div>
            </div>
            <!--Modal: Name-->

            <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-5.webp" alt="video"
                data-toggle="modal" data-target="#modal5"></a>

          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-lg-4 col-md-6 mb-4">

            <!--Modal: Name-->
            <div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                  <!--Body-->
                  <div class="modal-body mb-0 p-0">

                    <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/gsNY7TV4r1M"
                        allowfullscreen></iframe>
                    </div>

                  </div>

                  <!--Footer-->
                  <div class="modal-footer d-block d-md-flex justify-content-center">
                    <span class="mr-4">Spread the word!</span>
                    <a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a>
                    <!--Twitter-->
                    <a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
                    <!--Google +-->
                    <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
                    <!--Linkedin-->
                    <a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>

                    <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                  </div>

                </div>
                <!--/.Content-->

              </div>
            </div>
            <!--Modal: Name-->

            <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-6.webp" alt="video"
                data-toggle="modal" data-target="#modal3"></a>

          </div>
          <!-- Grid column -->

        </div>
        <!-- Grid row -->

Gallery with photo titles MDB Pro component

picture

Photo title
picture

Photo title
picture

Photo title
picture

Photo title
picture

Photo title
picture

Photo title
picture

Photo title
picture

Photo title
picture

Photo title
Edit in sandbox 
        
            

        <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 class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(121).webp"
                  data-size="1600x1067">
                  <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(121).webp"
                    class="img-fluid">
                  <h3 class="text-center my-3">Photo title</h3>
                </a>
              </figure>

              <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(96).webp"
                  data-size="1600x1067">
                  <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(96).webp"
                    class="img-fluid" />
                  <h3 class="text-center my-3">Photo title</h3>
                </a>
              </figure>

              <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(104).webp"
                  data-size="1600x1067">
                  <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(104).webp"
                    class="img-fluid" />
                  <h3 class="text-center my-3">Photo title</h3>
                </a>
              </figure>

              <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(45).webp"
                  data-size="1600x1067">
                  <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).webp"
                    class="img-fluid" />
                  <h3 class="text-center my-3">Photo title</h3>
                </a>
              </figure>

              <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(122).webp"
                  data-size="1600x1067">
                  <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(122).webp"
                    class="img-fluid" />
                  <h3 class="text-center my-3">Photo title</h3>
                </a>
              </figure>

              <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).webp"
                  data-size="1600x1067">
                  <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).webp"
                    class="img-fluid" />
                  <h3 class="text-center my-3">Photo title</h3>
                </a>
              </figure>

              <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(125).webp"
                  data-size="1600x1067">
                  <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(125).webp"
                    class="img-fluid" />
                  <h3 class="text-center my-3">Photo title</h3>
                </a>
              </figure>

              <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).webp"
                  data-size="1600x1067">
                  <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).webp"
                    class="img-fluid" />
                  <h3 class="text-center my-3">Photo title</h3>
                </a>
              </figure>

              <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(119).webp"
                  data-size="1600x1067">
                  <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(119).webp"
                    class="img-fluid" />
                  <h3 class="text-center my-3">Photo title</h3>
                </a>
              </figure>

            </div>

          </div>
        </div>

      
        
    
        
            

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

Gallery with slides and captions MDB Pro component

Edit in sandbox 
        
            

        <!--Carousel Wrapper-->
        <div id="carousel-example-2" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel">
          <!--Indicators-->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-2" data-slide-to="1"></li>
            <li data-target="#carousel-example-2" data-slide-to="2"></li>
          </ol>
          <!--/.Indicators-->
          <!--Slides-->
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
              <div class="view">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(105).webp" alt="First slide">
                <div class="mask rgba-black-light"></div>
              </div>
              <div class="carousel-caption">
                <h3 class="h3-responsive">This is the first title</h3>
                <p>First text</p>
              </div>
            </div>
            <div class="carousel-item">
              <!--Mask color-->
              <div class="view">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(115).webp" alt="Second slide">
                <div class="mask rgba-black-light"></div>
              </div>
              <div class="carousel-caption">
                <h3 class="h3-responsive">Thir is the second title</h3>
                <p>Secondary text</p>
              </div>
            </div>
            <div class="carousel-item">
              <!--Mask color-->
              <div class="view">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(108).webp" alt="Third slide">
                <div class="mask rgba-black-light"></div>
              </div>
              <div class="carousel-caption">
                <h3 class="h3-responsive">This is the third title</h3>
                <p>Third text</p>
              </div>
            </div>
          </div>
          <!--/.Slides-->
          <!--Controls-->
          <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
          <!--/.Controls-->
        </div>
        <!--/.Carousel Wrapper-->