Bootstrap 4 Gallery

Bootstrap 4 Gallery plugin

Bootstrap gallery is a component which compiles a number of media in one interactive collection presented in basic or more advanced lightboxes.

Basic Bootstrap 4 version

Show code 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" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-black waves-effect filter" data-rel="all">All</button>
    <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-black waves-effect filter" data-rel="1">Mountains</button>
    <button  type="button" data-mdb-button-init data-mdb-ripple-init 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);
        });
      });

Above is an example template for a Gallery in the Bootstrap 4 version based on jQuery. V4 is an older version of Bootstrap and we discourage implementing it in new projects.

Below you will find the same component but in the latest, more modern Bootstrap 5. We encourage you to use the v5 version instead, the v5 is more lightweight, more reliable and based on pure JavaScript instead of jQuery.

This page only compares the two version, you can find full documentation - with multiple options & API details via one of the links below:
Bootstrap v5 - full documentation Bootstrap v4 - full documentation

Basic Bootstrap 5 version

Show code Edit in sandbox

HTML

        
            
<!-- Gallery -->
<div class="row">
  <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Boat on Calm Water"
    />

    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain1.webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Wintry Mountain Landscape"
    />
  </div>

  <div class="col-lg-4 mb-4 mb-lg-0">
    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Mountains in the Clouds"
    />

    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Boat on Calm Water"
    />
  </div>

  <div class="col-lg-4 mb-4 mb-lg-0">
    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(18).webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Waves at Sea"
    />

    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Yosemite National Park"
    />
  </div>
</div>
<!-- Gallery -->