Bootstrap Hero 3 Section

How to use this Bootstrap snippet

A Digital Agency Specialized in AI and Web 3.0

We work in a customized way by devising and handling entirely online projects with long-term partnerships.

A Digital Agency Specialized in AI and Web 3.0

How to use this Bootstrap Hero 3 Section

Place the code in the <body> for Interface 
          
<!-- Hero 3 - Bootstrap Brain Component -->
<section class="py-3 py-lg-5 py-xl-8">
  <div class="container overflow-hidden">
    <div class="row gy-5 gy-lg-0 align-items-lg-center justify-content-lg-between">
      <div class="col-12 col-lg-6 order-1 order-lg-0">
        <h2 class="display-3 fw-bold mb-3">A Digital Agency Specialized in AI and Web 3.0</h2>
        <p class="fs-4 mb-5">We work in a customized way by devising and handling entirely online projects with long-term partnerships.</p>
        <div class="d-grid gap-2 d-sm-flex">
          <button type="button" class="btn btn-primary bsb-btn-2xl rounded-pill">Explore Now</button>
          <button type="button" class="btn btn-outline-primary bsb-btn-2xl rounded-pill">Free Trial</button>
        </div>
      </div>
      <div class="col-12 col-lg-5 text-center">
        <div class="position-relative">
          <div class="bsb-circle border border-4 border-warning position-absolute top-50 start-10 translate-middle z-1"></div>
          <div class="bsb-circle bg-primary position-absolute top-50 start-50 translate-middle" style="--bsb-cs: 460px;"></div>
          <div class="bsb-circle border border-4 border-warning position-absolute top-10 end-0 z-1" style="--bsb-cs: 100px;"></div>
          <img class="img-fluid position-relative z-2" loading="lazy" src="./assets/img/hero-img-1.webp" alt="A Digital Agency Specialized in AI and Web 3.0">
        </div>
      </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/heroes/hero-3/assets/css/hero-3.css">

This Bootstrap 5 hero banner has a trendy and responsive layout. Bootstrap hero image section has a main header and more significant Call to Action (CTA) buttons. This big Bootstrap hero banner will sweeten the layout of your projects. The main image is transparent, with cool CSS circles in the background. You can adjust the circle’s positions and colors to meet your taste.