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
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter