Bootstrap 5 Masonry Grid Layout Example

Our Masonry grid layout is a minimal and refined example of a Bootstrap 5 component. Masonry cards have a nice hover effect featuring image zoom and text animation.
Bootstrap Masonry Example
This Bootstrap masonry layout is super easy to use in your web projects. It has a responsive design that will look fantastic on all displays.
Tools
Bootstrap Brain
We are using Bootstrap Brain (BSB) Framework for basic styles. Bootstrap 5 is the base of the Bootstrap Brain (BSB) Framework.
Features
- Bootstrap 5
- BS Brain Framework
- HTML5 & CSS3
- W3C Valid
- Commented Code
- Masonry Grid Layout
- Responsive Layout
- Modern Design
- Clean Snippet
- SEO Optimized
- Easy to Use
- Cross Browser Compatible
Browse
Preview
Our Projects
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque et neque id ligula mattis commodo.
<!-- Project 1 - Bootstrap Brain Component -->
<section class="bg-light py-5 py-xl-8">
<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">Our Projects</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 gy-md-2 bsb-project-1-grid">
<div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
<figure class="rounded rounded-4 overflow-hidden bsb-hover-overlay">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" loading="lazy" src="./assets/img/project-img-1.jpg" alt="">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Charming Concept</h3>
<div class="text-white bsb-hover-fadeInRight">Photography</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-6 col-lg-6 bsb-project-1-item">
<figure class="rounded rounded-4 overflow-hidden bsb-hover-overlay">
<a href="#!">
<img class="img-fluid bsb-scale bsb-hover-scale-up" loading="lazy" src="./assets/img/project-img-2.jpg" alt="">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInUp">Linear Architecture</h3>
<div class="text-white bsb-hover-fadeInDown">Inspiration</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
<figure class="rounded rounded-4 overflow-hidden bsb-hover-overlay">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" loading="lazy" src="./assets/img/project-img-3.jpg" alt="">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Endless Looks</h3>
<div class="text-white bsb-hover-fadeInRight">Nature</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
<figure class="rounded rounded-4 overflow-hidden bsb-hover-overlay">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" loading="lazy" src="./assets/img/project-img-4.jpg" alt="">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Sleek Typography</h3>
<div class="text-white bsb-hover-fadeInRight">Design</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
<figure class="rounded rounded-4 overflow-hidden bsb-hover-overlay">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" loading="lazy" src="./assets/img/project-img-5.jpg" alt="">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Ebony Vintage</h3>
<div class="text-white bsb-hover-fadeInRight">Fashion</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
<figure class="rounded rounded-4 overflow-hidden bsb-hover-overlay">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" loading="lazy" src="./assets/img/project-img-6.jpg" alt="">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Orange Shine</h3>
<div class="text-white bsb-hover-fadeInRight">Food</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
<figure class="rounded rounded-4 overflow-hidden bsb-hover-overlay">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" loading="lazy" src="./assets/img/project-img-7.jpg" alt="">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Boat Adventure</h3>
<div class="text-white bsb-hover-fadeInRight">Health</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
<figure class="rounded rounded-4 overflow-hidden bsb-hover-overlay">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" loading="lazy" src="./assets/img/project-img-8.jpg" alt="">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Offroad Moves</h3>
<div class="text-white bsb-hover-fadeInRight">Nature</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
<figure class="rounded rounded-4 overflow-hidden bsb-hover-overlay">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" loading="lazy" src="./assets/img/project-img-9.jpg" alt="">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Cozy Occupancy</h3>
<div class="text-white bsb-hover-fadeInRight">Design</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<!-- CSS Files -->
<link rel="stylesheet" href="https://unpkg.com/bs-brain/bsb.css" />
<!-- Javascript Files: Vendors -->
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/[email protected]/packery-mode.pkgd.min.js"></script>
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>
<!-- Javascript Files: Controllers -->
<script src="https://unpkg.com/bs-brain/components/projects/project-1/assets/controller/project-1.js"></script>
- Use in personal projects
- Customize the template files
- Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- Free Updates
- Access to all 3 Pro Templates
- Access to all 18 Pro Components
- Use in SaaS
- Resell & Redistribute
BB Startup
Freelancer
$49
3 Months Access
3 Pro BS Templates
18 Pro BS Components
- Use in personal projects
- Customize the template files
- Unlimited Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- 3 Months Free Updates
- Access to all our 3 Pro Templates
- Access to all our 18 Pro Components
-
Use in SaaS -
Resell & Redistribute
BB Club
Agency
$149
12 Months Access
3 Pro BS Templates
18 Pro BS Components
- Use in personal projects
- Customize the template files
- Unlimited Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- 12 Months Free Updates
- Access to all our 3 Pro Templates
- Access to all our 18 Pro Components
- Use in SaaS
-
Resell & Redistribute
Bootstrap 5 Project Snippets
Browse our creative library of Bootstrap project snippets and components. These codes will help you to build your web projects quicker and easier.