Bootstrap Project 1 Section

How to use this Bootstrap snippet

Our Projects

We are passionate about creating innovative products. We believe that technology can make people's lives better.

Photography

Charming Concept

Photography
Inspiration

Linear Architecture

Inspiration
Nature

Endless Looks

Nature
Design

Sleek Typography

Design
Fashion

Ebony Vintage

Fashion
Food

Orange Shine

Food
Health

Boat Adventure

Health
Nature

Offroad Moves

Nature
Design

Cozy Occupancy

Design

How to use this Bootstrap Project 1 Section

Place the code in the <body> for Interface 
          
<!-- Project 1 - Bootstrap Brain Component -->
<section class="bg-light py-3 py-md-5">
  <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 passionate about creating innovative products. We believe that technology can make people's lives better.</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-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-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-1.jpg" alt="Photography">
          </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-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale bsb-hover-scale-up" src="./assets/img/project-img-2.jpg" alt="Inspiration">
          </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-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-3.jpg" alt="Nature">
          </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-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-4.jpg" alt="Design">
          </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-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-5.jpg" alt="Fashion">
          </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-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-6.jpg" alt="Food">
          </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-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-7.jpg" alt="Health">
          </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-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-8.jpg" alt="Nature">
          </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-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-9.jpg" alt="Design">
          </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>
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-1/assets/css/project-1.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-1/assets/controller/project-1.js"></script>

Our Bootstrap 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. 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.