Bootstrap 5 Masonry Grid Layout Component

This masonry grid layout example uses Bootstrap 5. Download free to use in any project of Bootstrap 5.

<!-- Masonry 1 - HCF Bootstrap 5 Component -->
<section class="my-3 my-md-5">
  <div class="container overflow-hidden">
    <div class="row gy-3 g-md-3 hcf-isotope-grid">
      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/project-1-900x1000.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Charming Concept</h3>
            <div class="card-category text-white text-center">Photography</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-6 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/project-2-900x1000.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Linear Architecture</h3>
            <div class="card-category text-white text-center">Inspiration</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/project-3-900x1000.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Endless Looks</h3>
            <div class="card-category text-white text-center">Nature</div>
          </div>
        </a>
      </div>

      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/project-4-900x1000.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Sleek Typography</h3>
            <div class="card-category text-white text-center">Design</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/project-5-900x1000.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Ebony Vintage</h3>
            <div class="card-category text-white text-center">Fashion</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/project-6-900x1000.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Orange Shine</h3>
            <div class="card-category text-white text-center">Food</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/project-7-900x1000.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Boat Adventure</h3>
            <div class="card-category text-white text-center">Health</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/project-8-900x1000.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Offroad Moves</h3>
            <div class="card-category text-white text-center">Nature</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/project-9-900x1000.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Cozy Occupancy</h3>
            <div class="card-category text-white text-center">Design</div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>
.hcf-masonry-card {
  display: block;
  position: relative;
  overflow: hidden;
}
.hcf-masonry-card .card-img {
  object-fit: cover;
  transform: scale(1);
  transition: transform 150ms linear;
}
.hcf-masonry-card .card-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}
.hcf-masonry-card .card-overlay .card-title {
  display: inline-block;
  transform: translateY(10px);
  opacity: 0;
}
.hcf-masonry-card .card-overlay .card-category {
  transform: translateY(10px);
  opacity: 0;
}
.hcf-masonry-card:hover .card-img {
  transform: scale(1.05);
  transition: transform 150ms linear;
}
.hcf-masonry-card:hover .card-overlay {
  opacity: 1;
  transition: opacity 150ms linear;
}
.hcf-masonry-card:hover .card-overlay .card-title {
  opacity: 1;
  transform: translateY(0);
  transition: transform 150ms linear 0.1s, opacity 150ms linear 0.1s;
}
.hcf-masonry-card:hover .card-overlay .card-category {
  opacity: 1;
  transform: translateY(0);
  transition: transform 150ms linear 0.2s, opacity 150ms linear 0.2s;
}

Bootstrap 5 Masonry Grid Example

Customize this sleek Bootstrap 5 masonry grid layout to showcase portfolios beautifully.