Bootstrap 5 Hero Banner with Split Image

A hero banner is a large, eye-catching section typically found at the top of a webpage. It often includes a background image or video, a compelling headline, and a call-to-action (CTA) button. The primary goal of a hero banner is to grab the visitor’s attention immediately and convey the website’s primary message or value proposition.

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

Bootstrap 5 Hero Banner with Split Image

This Bootstrap hero banner has a full-width layout. It has a big hero image split in half. This free Bootstrap hero banner snippet will look great on Bootstrap header templates.

This Bootstrap hero banner has a significant heading and a prominent Call to Action (CTA) button. The color of the Bootstrap header template is effortless to customize.

Why Use a Split Image Hero Banner?

A split-image hero banner divides the hero section into two distinct parts: one featuring an image and the other containing text or additional visuals. This layout offers several advantages:

  • Visual Balance: The split design creates a balanced visual composition, making the content more digestible and appealing.
  • Versatility: It combines visuals and text to highlight different aspects of a product or service.
  • Enhanced Engagement: By strategically placing a CTA and informative text alongside an attractive image, the split image hero banner has the potential to significantly increase user engagement, giving you reason to be optimistic about your design’s impact.

Features

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

Preview

<!-- Hero 4 - Bootstrap Brain Component -->
<section class="bg-primary">
  <div class="container-fluid overflow-hidden">
    <div class="row">
      <div class="col-12 col-md-6 order-1 order-md-0 align-self-md-end">
        <div class="row py-3 py-sm-5 py-xl-9 mt-md-10 justify-content-sm-center">
          <div class="col-12 col-sm-10">
            <h2 class="display-2 fw-bolder mb-4 text-white">We Offer Modern Web Solutions</h2>
            <div class="row">
              <div class="col-12 col-xxl-8">
                <p class="fs-5 mb-5 text-white">We work in a customized way by devising and handling entirely online projects with long-term partnerships.</p>
              </div>
            </div>
            <div class="d-grid gap-2 d-sm-flex">
              <button type="button" class="btn btn-warning bsb-btn-2xl rounded-pill">Explore Now</button>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 p-0">
        <img class="img-fluid w-100 h-100 object-fit-cover" loading="lazy" src="./assets/img/hero-img-1.webp" alt="We Offer Modern Web Solutions">
      </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-4/assets/css/hero-4.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 8 Pro Templates
  • Access to all 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute

BB Startup

Freelancer

$49

3 Months Access

8 Pro BS Templates

51 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 8 Pro Templates
  • Access to all our 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute

BB Club

Agency

$149

12 Months Access

8 Pro BS Templates

51 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 8 Pro Templates
  • Access to all our 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute