Bootstrap Hero HTML Template

July 6, 2024

A hero section is often the first thing visitors see when they land on your website, making it crucial for creating a solid first impression. With Bootstrap, you can easily create a responsive and visually appealing hero section.

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 Hero HTML Template

Below is a free Bootstrap hero HTML template. This template includes a full-width background image, overlay text, and a call-to-action button.

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 section using Bootstrap is both easy and efficient. The free Bootstrap hero HTML template provided in this article, designed for ease of use, serves as a great starting point for developing a visually appealing and responsive hero section for your website.

Feel free to customize the template to fit your specific needs and branding. With Bootstrap’s powerful features and flexibility, you can create a unique and engaging hero section that leaves a lasting impression on your visitors. Happy coding!

Features

Bootstrap 5
BSB Framework
Background Image
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 6 - Bootstrap Brain Component -->
<section class="py-4 py-md-5">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="container-fluid bsb-hero-6 bsb-overlay border border-dark" style="--bsb-overlay-opacity: 0.5; --bsb-overlay-bg-color: var(--bs-light-rgb); background-image: url('./assets/img/hero-img-1.webp');">
          <div class="row justify-content-md-center align-items-center">
            <div class="col-12 col-md-11 col-xl-10">
              <h2 class="display-1 text-center text-md-start text-shadow-head fw-bold mb-4">Welcome to Presta</h2>
              <p class="lead text-center text-md-start text-shadow-body mb-5 d-flex justify-content-sm-center justify-content-md-start">
                <span class="col-12 col-sm-10 col-md-8 col-xxl-7">Where every squeak, every rattle, and every wobble finds its solution, ensuring your ride is always smooth and worry-free.</span>
              </p>
              <div class="d-grid gap-2 d-sm-flex justify-content-sm-center justify-content-md-start">
                <a href="#!" class="btn bsb-btn-2xl btn-outline-dark">Explore More</a>
              </div>
            </div>
          </div>
        </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]/utilities/bsb-overlay/bsb-overlay.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/utilities/bsb-btn-size/bsb-btn-size.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/heroes/hero-6/assets/css/hero-6.css">