Bootstrap Hero 2 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.

Art of Design

How to use this Bootstrap Hero 2 Section

Place the code in the <body> for Interface 
          
<!-- Hero 2 - Bootstrap Brain Component -->
<section class="bsb-hero-2 px-3">
  <div class="container overflow-hidden">
    <div class="row gy-3 gy-lg-0 align-items-lg-center justify-content-lg-between">
      <div class="col-12 col-lg-6 order-1 order-lg-0">
        <h2 class="display-3 fw-bold mb-3">Art of Design</h2>
        <p class="fs-4 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">
          <button type="button" class="btn btn-primary bsb-btn-xl rounded-pill">Free Consultation</button>
          <button type="button" class="btn btn-outline-primary bsb-btn-xl rounded-pill">Buy Credits</button>
        </div>
      </div>
      <div class="col-12 col-lg-5 text-center">
        <img class="img-fluid" loading="lazy" src="./assets/img/hero-img-1.jpg" alt="Art of Design" style="-webkit-mask-image: url(./assets/img/hero-img-blob-1.svg); mask-image: url(./assets/img/hero-img-blob-1.svg);">
      </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-2/assets/css/hero-2.css">

This beautiful Bootstrap 5 hero header uses an image with a blob effect. It has smart Call to Action buttons. This snippet will help you to embellish the header of your website project. Our snippet will save time for web designers and front-end and back-end developers. This hero section is easy to use and customize for Bootstrap 5 projects.