Bootstrap 5 Hero Image Section Example

July 6, 2024

Hero images are a powerful way to capture attention and make a strong visual impact on a website. Bootstrap 5, a popular front-end framework, provides a flexible and responsive grid system and various utility classes that make creating a beautiful hero image section easy.

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 Background

This hero image section is a responsive snippet of Bootstrap 5. This section has call-to-action buttons and an appealing heading.

You can personalize the hero image section by using your favorite background image. Adding appealing text can transform your visitors into customers.

Preview Get Code

More Snippets Join BS Brain

Bootstrap 5 Templates

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

Creating a stunning hero image section with Bootstrap 5 is straightforward and can significantly enhance your website’s visual appeal. By leveraging Bootstrap’s robust grid system and utility classes, you can quickly implement a responsive and attractive hero section that grabs your visitors’ attention.

Feel free to customize the content, styles, and images to suit your needs. With Bootstrap 5, the possibilities for creating engaging and visually appealing web pages are endless. Happy coding!

Features

Bootstrap 5
BSB Framework
Call to Action Button
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 1 - Bootstrap Brain Component -->
<section class="bsb-hero-1 px-3 bsb-overlay bsb-hover-pull" style="background-image: url('./assets/img/hero-img-1.jpg');">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-12 col-md-11 col-lg-9 col-xl-7 col-xxl-6 text-center text-white">
        <h2 class="display-3 fw-bold mb-3">Art of Design</h2>
        <p class="lead mb-5">Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.</p>
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
          <button type="button" class="btn bsb-btn-xl btn-light gap-3">Free Consultation</button>
          <button type="button" class="btn bsb-btn-xl btn-outline-light">Buy Credits</button>
        </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-1/assets/css/hero-1.css">