Bootstrap Hero 1 Section

How to use this Bootstrap snippet

Art of Design

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.

How to use this Bootstrap Hero 1 Section

Place the code in the <body> for Interface 
          
<!-- 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>
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-1/assets/css/hero-1.css">

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.