Prev Next

BS5 Jumbotron

Although the dedicated .jumbotron class was removed in Bootstrap 5, you can create a similar “hero” or “jumbotron” effect using built-in spacing, color, and display utility classes.

Key Topics

Basic Jumbotron Style

To replicate a jumbotron, use a padded container with a background color and large text. For example:

<div class="bg-light p-5 mb-4">
    <h1 class="display-4">Hello, world!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component.</p>
</div>

Explanation: .bg-light with .p-5 adds a light gray background and ample padding. .display-4 and .lead replicate large text styles previously provided by .jumbotron.

Customization

You can switch background colors, add background images, or change text alignment. For instance, use .text-center to center your hero content.

<div class="bg-primary text-white p-5 text-center">
    <h1 class="display-3">Welcome!</h1>
    <p class="lead">A bold hero section with primary background and white text.</p>
</div>

Explanation: Using .bg-primary and .text-white with a large heading creates a strong visual hero. Adjust the padding or text alignment for different looks.

Full Jumbotron Example

Below is a complete page implementing a modern “jumbotron” style section alongside standard Bootstrap 5 elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Jumbotron Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <header class="bg-light p-5 mb-4">
        <div class="container">
            <h1 class="display-4">Hello, Bootstrap 5!</h1>
            <p class="lead">
                This is a modern take on the jumbotron, using utility classes instead of a dedicated .jumbotron class.
            </p>
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </div>
    </header>

    <main class="container">
        <h2>Main Content</h2>
        <p>
            Here is some example text below our hero section. Customize the background, text, or size to replicate any "jumbotron"-style layout.
        </p>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: A light background and extra padding give a large hero feel, while .display-4 and .lead classes emphasize the text. A button invites further interaction.

Key Takeaways

  • The .jumbotron class is deprecated in BS5, but recreating a hero section is simple with spacing and color utilities.
  • Use .display-* and .lead for large, attention-grabbing text.
  • Mix background, padding, and alignment classes to customize the layout.
Prev Next