Bootstrap Project 2 Section

How to use this Bootstrap snippet

Our Projects

We are committed to working with our partners and customers to develop products that make a difference in the world.

Photography

Canvas Lover

Photography
Nature

Red Lava

Nature
Adventure

Jungle Book

Adventure
Adventure

Wavy Road

Adventure
Photography

Golden Leaves

Photography
Design

Minimal Notions

Design
Design

Bright Winks

Design
Photography

Innovative Day

Photography

How to use this Bootstrap Project 2 Section

Place the code in the <body> for Interface 
          
<!-- 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>
Place the <link> tag in the <head> for CSS 
          
<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">
Place the <script> tag before the closing </body> for JS 
            
<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.