Bootstrap 5 Hero Banner with Split Image

July 6, 2024

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

Download Now

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.

Preview Get Code

More Snippets Join BS Brain

Bootstrap 5 Templates

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

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

Bootstrap 5 Components

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

HTML
CSS

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