Bootstrap Project 2 Section
Our Projects
We are committed to working with our partners and customers to develop products that make a difference in the world.
<!-- Project 2 - Bootstrap Brain Component -->
<section class="bg-light py-5 py-xl-8">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6">
<h2 class="mb-4 display-5 text-center">Our Projects</h2>
<p class="text-secondary mb-5 text-center lead fs-4">We are committed to working with our partners and customers to develop products that make a difference in the world.</p>
<hr class="w-50 mx-auto mb-5 mb-xl-9 border-dark-subtle">
</div>
</div>
</div>
<div class="container overflow-hidden">
<div class="row gy-2 g-md-2 g-xl-3 bsb-project-2-grid">
<div class="col-12 col-md-4 bsb-project-2-item">
<figure class="rounded rounded-3 overflow-hidden bsb-overlay-hover m-0">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-landscape-1.jpg" alt="Photography">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Canvas Lover</h3>
<div class="text-white bsb-hover-fadeInRight">Photography</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-4 bsb-project-2-item">
<figure class="rounded rounded-3 overflow-hidden bsb-overlay-hover m-0">
<a href="#!">
<img class="img-fluid bsb-scale bsb-hover-scale-up" src="./assets/img/project-portrait-1.jpg" alt="Nature">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInUp">Red Lava</h3>
<div class="text-white bsb-hover-fadeInDown">Nature</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-4 bsb-project-2-item">
<figure class="rounded rounded-3 overflow-hidden bsb-overlay-hover m-0">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-landscape-2.jpg" alt="Adventure">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Jungle Book</h3>
<div class="text-white bsb-hover-fadeInRight">Adventure</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-4 bsb-project-2-item">
<figure class="rounded rounded-3 overflow-hidden bsb-overlay-hover m-0">
<a href="#!">
<img class="img-fluid bsb-scale bsb-hover-scale-up" src="./assets/img/project-portrait-2.jpg" alt="Adventure">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInUp">Wavy Road</h3>
<div class="text-white bsb-hover-fadeInDown">Adventure</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-4 bsb-project-2-item">
<figure class="rounded rounded-3 overflow-hidden bsb-overlay-hover m-0">
<a href="#!">
<img class="img-fluid bsb-scale bsb-hover-scale-up" src="./assets/img/project-portrait-3.jpg" alt="Photography">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInUp">Golden Leaves</h3>
<div class="text-white bsb-hover-fadeInDown">Photography</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-4 bsb-project-2-item">
<figure class="rounded rounded-3 overflow-hidden bsb-overlay-hover m-0">
<a href="#!">
<img class="img-fluid bsb-scale bsb-hover-scale-up" src="./assets/img/project-portrait-4.jpg" alt="Design">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInUp">Minimal Notions</h3>
<div class="text-white bsb-hover-fadeInDown">Design</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-4 bsb-project-2-item">
<figure class="rounded rounded-3 overflow-hidden bsb-overlay-hover m-0">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-landscape-3.jpg" alt="Design">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Bright Winks</h3>
<div class="text-white bsb-hover-fadeInRight">Design</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-4 bsb-project-2-item">
<figure class="rounded rounded-3 overflow-hidden bsb-overlay-hover m-0">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-landscape-4.jpg" alt="Photography">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Innovative Day</h3>
<div class="text-white bsb-hover-fadeInRight">Photography</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/projects/project-2/assets/css/project-2.css">
<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>
<script src="https://unpkg.com/[email protected]/components/projects/project-2/assets/controller/project-2.js"></script>
This Bootstrap 5 masonry layout example is responsive, trendy, and contemporary. It has a unique masonry grid design along with stunning hover effects. This Bootstrap masonry layout snippet is free to use in commercial or personal projects. Let’s try this great snippet to boost your project interface.