Bootstrap Hero 5 Section

How to use this Bootstrap snippet

Dream of Success

There are three ways to ultimate success: The first way is to be kind. The second way is to be kind. The third way is to be kind.

How to use this Bootstrap Hero 5 Section

Place the code in the <body> for Interface 
          
<!-- Hero 5 - Bootstrap Brain Component -->
<section class="bsb-hero-5 px-3 bsb-overlay" style="background-image: url('./assets/img/hero-img-1.webp');">
  <div class="container">
    <div class="row justify-content-md-center align-items-center">
      <div class="col-12 col-md-11 col-lg-9 col-xl-8 col-xxl-7">
        <h2 class="display-1 text-white text-center fw-bold mb-4">Dream of Success</h2>
        <p class="lead text-white text-center mb-5 d-flex justify-content-sm-center">
          <span class="col-12 col-sm-10 col-md-8 col-xxl-7">There are three ways to ultimate success: The first way is to be kind. The second way is to be kind. The third way is to be kind.</span>
        </p>
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
          <button type="button" class="btn bsb-btn-2xl btn-outline-light">Free Consultation</button>
        </div>
      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<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-5/assets/css/hero-5.css">

Download the free Bootstrap 5 Hero Banner to incorporate in the personal and commercial Bootstrap projects. This Bootstrap 5 Hero Banner is stylish, sleek, and graceful. This free Bootstrap 5 snippet has a responsive layout. This Bootstrap 5 Hero Banner features a central heading, a brief statement, and a Call to Action button. Bootstrap 5 Hero Banner has a gorgeous and giant background image to heighten the beauty of the website header.