Bootstrap 5 Hero Banner with Multiple Circles

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.
Bootstrap 5 Hero Image Example
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.
Tools
Bootstrap 5 Snippet Update
We have updated this Bootstrap snippet to Bootstrap 5.3.2 and BSB Framework 2.0.2. We have rechecked this Bootstrap component on Oct 5, 2023.
Best Ready to Use Web Themes & Templates
Features
- Bootstrap 5
- BS Brain Framework
- HTML5 & CSS3
- W3C Valid
- Commented Code
- Call to Action Button
- Responsive Layout
- CSS Circles
- Clean Snippet
- SEO Optimized
- Easy to Use
- Cross Browser Compatible
Browse
Preview
<!-- 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">
<h1 class="display-3 fw-bold mb-3">A Digital Agency Specialized in AI and Web 3.0</h1>
<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-3xl rounded-pill">Explore Now</button>
<button type="button" class="btn btn-outline-primary bsb-btn-3xl 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="">
</div>
</div>
</div>
</div>
</section>
<!-- CSS Files -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://unpkg.com/bs-b[email protected]/components/heroes/hero-3/assets/css/hero-3.css" />
- Use in personal projects
- Customize the template files
- Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- Free Updates
- Access to all 5 Pro Templates
- Access to all 34 Pro Components
- Use in SaaS
- Resell & Redistribute
BB Startup
Freelancer
$49
3 Months Access
5 Pro BS Templates
34 Pro BS Components
- Use in personal projects
- Customize the template files
- Unlimited Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- 3 Months Free Updates
- Access to all our 5 Pro Templates
- Access to all our 34 Pro Components
-
Use in SaaS -
Resell & Redistribute
BB Club
Agency
$149
12 Months Access
5 Pro BS Templates
34 Pro BS Components
- Use in personal projects
- Customize the template files
- Unlimited Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- 12 Months Free Updates
- Access to all our 5 Pro Templates
- Access to all our 34 Pro Components
- Use in SaaS
-
Resell & Redistribute
Bootstrap 5 Hero Image Snippets
Download Our Bootstrap 5 hero image snippets, which are free and easy to customize.