Bootstrap 5 Hero Blob Image Section Example

Bootstrap 5 Hero Section Blob Image

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.

Versatile Bootstrap 5 Hero Image Snippet

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.

Preview
Get Code
More Snippets
Join BS Brain

Tools

Bootstrap Brain

We are using Bootstrap Brain (BSB) Framework for basic styles. Bootstrap 5 is the base of the Bootstrap Brain (BSB) Framework.

Detail

Features

  • Bootstrap 5
  • BS Brain Framework
  • HTML5 & CSS3
  • W3C Valid
  • Commented Code
  • Call to Action Button
  • Responsive Layout
  • Blob Image
  • Clean Snippet
  • SEO Optimized
  • Easy to Use
  • Cross Browser Compatible

Browse

Category

, ,

Tags

, , , , , , , , , ,

Preview

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.

<!-- Hero 2 - Bootstrap Brain Component -->
<section class="bg-light py-5 py-xl-8 py-xxl-18">
  <div class="container overflow-hidden">
    <div class="row gy-5 gy-lg-0 align-items-lg-center justify-content-lg-between">
      <div class="col-12 col-lg-6 order-1 order-lg-0">
        <h1 class="display-3 fw-bold mb-3">Art of Design</h1>
        <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 btn-2xl rounded-pill px-4 gap-3">Free Consultation</button>
          <button type="button" class="btn btn-outline-primary btn-2xl rounded-pill px-4">Buy Credits</button>
        </div>
      </div>
      <div class="col-12 col-lg-5 text-center">
        <img class="img-fluid mask-position-center-center mask-repeat-no-repeat mask-size-auto" loading="lazy" src="./assets/img/hero-img-1.jpg" alt="" 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>
<!-- CSS Files -->
<link rel="stylesheet" href="https://unpkg.com/bs-brain/bsb.css" />
  • Use in personal projects
  • Customize the template files
  • Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • Free Updates
  • Access to all 4 Pro Templates
  • Access to all 27 Pro Components
  • Use in SaaS
  • Resell & Redistribute

BB Startup

Freelancer

$49

3 Months Access

4 Pro BS Templates

27 Pro BS Components

  • Use in personal projects
  • Customize the template files
  • Unlimited Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • 3 Months Free Updates
  • Access to all our 4 Pro Templates
  • Access to all our 27 Pro Components
  • Use in SaaS
  • Resell & Redistribute
Buy Now

BB Club

Agency

$149

12 Months Access

4 Pro BS Templates

27 Pro BS Components

  • Use in personal projects
  • Customize the template files
  • Unlimited Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • 12 Months Free Updates
  • Access to all our 4 Pro Templates
  • Access to all our 27 Pro Components
  • Use in SaaS
  • Resell & Redistribute
Buy Now