Bootstrap Project 3 Section

How to use this Bootstrap snippet

Portfolio

From captivating websites to breathtaking visual identities, our portfolio is a testament to our dedication.

Branding

Visual Identity

Branding
Design

Logo Evolution

Design
AI

Machine Learning

AI
Photography

Lens Formula

Photography

How to use this Bootstrap Project 3 Section

Place the code in the <body> for Interface 
          
<!-- Project 3 - Bootstrap Brain Component -->
<section class="py-3 py-md-5 py-xl-8">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-10 col-lg-8">
        <h3 class="fs-5 mb-2 text-secondary text-uppercase">Portfolio</h3>
        <h2 class="display-5 mb-4">From captivating websites to breathtaking visual identities, our portfolio is a testament to our dedication.</h2>
        <button type="button" class="btn btn-lg btn-primary mb-3 mb-md-4 mb-xl-5">All Portfolio</button>
      </div>
    </div>
  </div>

  <div class="container overflow-hidden">
    <div class="row gy-3 gy-lg-4 gy-lg-0x">
      <div class="col-12 col-lg-6">
        <figure class="rounded rounded-3 overflow-hidden bsb-overlay-hover m-0">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" loading="lazy" src="./assets/img/project-image-1.jpg" alt="Branding">
          </a>
          <figcaption>
            <h3 class="text-white bsb-hover-fadeInLeft">Visual Identity</h3>
            <div class="text-white bsb-hover-fadeInRight">Branding</div>
          </figcaption>
        </figure>
      </div>
      <div class="col-12 col-lg-6">
        <figure class="rounded rounded-3 overflow-hidden bsb-overlay-hover m-0">
          <a href="#!">
            <img class="img-fluid bsb-scale bsb-hover-scale-up" loading="lazy" src="./assets/img/project-image-2.jpg" alt="Design">
          </a>
          <figcaption>
            <h3 class="text-white bsb-hover-fadeInUp">Logo Evolution</h3>
            <div class="text-white bsb-hover-fadeInDown">Design</div>
          </figcaption>
        </figure>
      </div>
      <div class="col-12 col-lg-6">
        <figure class="rounded rounded-3 overflow-hidden bsb-overlay-hover m-0">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" loading="lazy" src="./assets/img/project-image-3.jpg" alt="AI">
          </a>
          <figcaption>
            <h3 class="text-white bsb-hover-fadeInLeft">Machine Learning</h3>
            <div class="text-white bsb-hover-fadeInRight">AI</div>
          </figcaption>
        </figure>
      </div>
      <div class="col-12 col-lg-6">
        <figure class="rounded rounded-3 overflow-hidden bsb-overlay-hover m-0">
          <a href="#!">
            <img class="img-fluid bsb-scale bsb-hover-scale-up" loading="lazy" src="./assets/img/project-image-4.jpg" alt="Photography">
          </a>
          <figcaption>
            <h3 class="text-white bsb-hover-fadeInUp">Lens Formula</h3>
            <div class="text-white bsb-hover-fadeInDown">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-3/assets/css/project-3.css">

This Bootstrap Portfolio Snippet example has an elegant two-column layout to portray projects beautifully. This Bootstrap Portfolio component has a responsive design with a flawless visual hierarchy. This Bootstrap Portfolio Snippet uses Bootstrap 5, HTML and CSS. You can use this Bootstrap Portfolio Snippet in the Bootstrap templates smoothly. This free Bootstrap Portfolio Snippet has a big heading with a Call to Action (CTA) button.