HTML
<!-- Masonry 1 - HCF Bootstrap 5 Component -->
<section class="bg-light py-5 py-xl-6">
  <div class="container mb-5 mb-md-6">
    <div class="row justify-content-md-center">
      <div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6 text-center">
        <h2 class="mb-4 display-5">Masonry Layout</h2>
        <p class="text-secondary mb-4 mb-md-5">Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque et neque id ligula mattis commodo.</p>
        <hr class="w-50 mx-auto mb-0 text-secondary">
      </div>
    </div>
  </div>

  <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/img-1.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/img-2.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/img-3.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/img-4.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/img-5.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/img-6.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/img-7.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/img-8.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/img-9.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>
Copy