Bootstrap 5Layout

Bootstrap 5 Hero Section

A hero section is the large, prominent area at the top of a web page — the first thing visitors see. In Bootstrap 5, hero sections are built using jumbotron-style containers (jumbotron was removed in BS5), now replaced with custom padded sections using utility classes.

Primary Class

section.py-5 (custom — no dedicated BS5 hero class)

Common Use Cases

→Landing page above-the-fold section
→Product or app hero with screenshot
→Split hero with image and text
→Full-screen video background hero
→Gradient background hero with CTA

Variants & Classes

Variant	Description	Classes
Centred Hero	Text and CTA centred, clean background.	`py-5 text-center + container + h1 + p + btn`
Split Hero	Two columns — text left, image right.	`row align-items-center + col-lg-6 for each side`
Dark Background Hero	Dark section with white text and coloured CTA.	`py-5 bg-dark text-white`
Gradient Hero	CSS gradient background with white text.	`py-5 text-white + inline style background gradient`
Full-screen Hero	100vh height with vertically centred content.	`min-vh-100 d-flex align-items-center`

Code Example

<section class="py-5 py-lg-6 bg-dark text-white">
  <div class="container">
    <div class="row align-items-center gy-5">
      <div class="col-lg-6">
        <h1 class="display-5 fw-bold mb-4">Build faster with Canvas</h1>
        <p class="lead text-white-50 mb-5">
          Generate production-ready Bootstrap 5 HTML in minutes using AI.
          Describe any page — get clean, deployable code.
        </p>
        <div class="d-flex gap-3 flex-wrap">
          <a href="/generate" class="btn btn-primary btn-lg px-4">Start Free →</a>
          <a href="/examples" class="btn btn-outline-light btn-lg px-4">See Examples</a>
        </div>
      </div>
      <div class="col-lg-6">
        <img src="/hero-preview.png" alt="Canvas Builder preview" class="img-fluid rounded-3 shadow-lg">
      </div>
    </div>
  </div>
</section>

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Transparent overlay hero with full-bleed background image
✓Minimal white hero with animated word rotator
✓Dark split hero with product screenshot
✓Gradient hero with video background
✓Hero with logo strip and social proof below CTA

Best Practices

Keep the CTA above the fold on mobile

Test your hero height on a 375px wide viewport. Your primary CTA must be visible without scrolling on mobile. Use min-h and appropriate padding — not a fixed pixel height.

Use display-5 or display-4 for hero headlines

Bootstrap 5's display utility classes (display-1 through display-6) produce large, impactful headlines appropriate for hero sections. Pair with fw-bold for maximum weight.

Lazy-load hero background images

Full-screen background images in heroes are LCP elements — they directly impact your Core Web Vitals score. Use eager loading (loading='eager') on the hero image and optimise the file size.

FAQ

What replaced the Bootstrap jumbotron in Bootstrap 5?

Bootstrap 5 removed the jumbotron component entirely. The same effect is achieved with utility classes: a section with py-5, bg-light (or bg-dark), rounded-3, and a container inside.

How do I make a full-screen hero in Bootstrap 5?

Add min-vh-100 d-flex align-items-center to your section. This makes the section at least 100% of the viewport height and vertically centres the content.

Can Canvas Builder generate a hero section?

Yes — Canvas Builder generates hero sections as standalone blocks (1 credit) or as part of a full page generation. Describe the style, background, headline, and CTA in your prompt.