Bootstrap 5 Hero Banner with Multiple Circles

July 6, 2024

Hero banners are essential in modern web design, capturing users’ attention when they land on a page. Adding visually appealing components like multiple circles can make your hero banner stand out. Bootstrap 5, with its robust and flexible framework, makes it easy to create such designs.

Bootstrap 5 Component Update

We have updated this Bootstrap component to Bootstrap 5.3.3 and BSB Framework 2.0.4. We have rechecked this Bootstrap snippet on May 3, 2024.

Best Ready to Use Web Themes & Templates

Download Now

Bootstrap 5 Hero Image Example

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.

Preview Get Code

More Snippets Join BS Brain

Bootstrap 5 Templates

Bootstrap One Page Templates, Bootstrap 5 Templates, Free Bootstrap Templates

Creating a hero banner with multiple circles using Bootstrap 5 is a straightforward way to add visual interest and modern design to your webpage. You can make a unique and engaging hero section by combining Bootstrap’s flexible grid system with custom CSS.

Features

Bootstrap 5
BSB Framework
Call to Action Button
CSS Circles
HTML5 & CSS3
W3C Valid
Clean Snippet
Commented Code
Responsive Layout
Easy to Use
SEO Optimized
Cross Browser Compatible

Bootstrap 5 Components

Bootstrap Login Forms, Bootstrap 5 Snippets, Bootstrap Cards, Bootstrap Carousels, Bootstrap Heroes, Bootstrap Footers

HTML
CSS

<!-- 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>

<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">