Bootstrap 5 Hero Blob Image Section Example

July 6, 2024

In modern web design, engaging visuals and dynamic layouts are vital to capturing and retaining visitor attention. One popular design trend is the hero section featuring a blob image, which adds a touch of creativity and uniqueness to the website. Bootstrap 5, a powerful and flexible front-end framework, makes implementing this visually appealing feature easy.

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

Versatile Bootstrap 5 Hero Image Snippet

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.

Preview Get Code

More Snippets Join BS Brain

Bootstrap 5 Templates

Bootstrap One Page Templates, Bootstrap 5 Templates, Free Bootstrap Templates

What is a Hero Blob Image Section?

A hero blob image section is a large, prominent section at the top of a webpage, typically containing an image, text, and a call-to-action (CTA) button. The “blob” refers to a non-standard, organic shape that can be used as a mask for the image or as a background element, providing a modern and artistic look.

Features

Bootstrap 5
BSB Framework
Call to Action Button
Blob Image
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 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>

<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">