How to create hero section in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Hero Section in Bootstrap Quickly

To create a hero section in Bootstrap, use a container or container-fluid with a background color or image, add large heading text with display-1 or similar classes, and include a call-to-action button styled with Bootstrap button classes. Use Bootstrap's spacing and text utilities to align and space content easily.

📐

Syntax

A hero section in Bootstrap typically uses a div with container or container-fluid for full width. Inside, use heading tags with Bootstrap's display classes like display-1 for large text. Add buttons with classes like btn and btn-primary. Use spacing classes such as py-5 for vertical padding and text-center to center content.

html

<div class="container text-center py-5">
  <h1 class="display-1">Your Hero Title</h1>
  <p class="lead">A short description or tagline goes here.</p>
  <a href="#" class="btn btn-primary btn-lg">Call to Action</a>
</div>

Output

A centered large heading with a smaller description below and a big blue button underneath, all spaced vertically.

💻

Example

This example shows a full hero section with a background color, centered text, and a call-to-action button using Bootstrap 5 classes.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Hero Section Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <section class="bg-primary text-white text-center py-5">
    <div class="container">
      <h1 class="display-1 fw-bold">Welcome to Our Website</h1>
      <p class="lead mb-4">We provide awesome services to help you succeed.</p>
      <a href="#" class="btn btn-light btn-lg">Get Started</a>
    </div>
  </section>
</body>
</html>

Output

A full-width blue background hero section with large white heading, a white subtitle, and a large light button centered vertically and horizontally.

⚠️

Common Pitfalls

Not using container or container-fluid can cause content to stretch oddly or not align well.
Forgetting to add spacing classes like py-5 can make the hero section look cramped.
Using inline styles instead of Bootstrap classes reduces responsiveness and consistency.
Not setting text color properly when using background colors can make text hard to read.

html

<!-- Wrong: No container and no spacing -->
<section class="bg-primary text-white">
  <h1 class="display-1">Hello</h1>
  <p>Missing container and padding</p>
</section>

<!-- Right: Added container and padding -->
<section class="bg-primary text-white text-center py-5">
  <div class="container">
    <h1 class="display-1">Hello</h1>
    <p>Proper container and spacing</p>
  </div>
</section>

Output

The first section looks cramped and text is aligned to the left; the second section is centered with proper spacing and looks balanced.

📊

Quick Reference

Use these Bootstrap classes to build a hero section:

container or container-fluid: Wrap content for alignment and width control.
display-1 to display-6: Large heading sizes.
lead: For subtitle or description text.
btn, btn-primary, btn-lg: Style buttons.
py-5, my-4: Vertical spacing.
text-center: Center text horizontally.
bg-primary, text-white: Background and text colors.

✅

Key Takeaways

Wrap hero content in a Bootstrap container for proper alignment and spacing.

Use display classes like display-1 for large, eye-catching headings.

Add vertical padding with spacing utilities like py-5 to avoid cramped content.

Use text and background color classes to ensure good contrast and readability.

Include a clear call-to-action button styled with btn and btn-primary classes.