Bootstrap 5 Jumbotron

Bootstrap 5 Jumbotron Guide

In Bootstrap 4, the .jumbotron class was used to create large, attention-grabbing sections. However, in Bootstrap 5, the jumbotron component has been removed. You can still create a similar effect using utility classes like .bg-light, .p-5, .text-center, and .container.

1. Basic Jumbotron (Using a Div & Utility Classes)

A simple jumbotron-style section using Bootstrap 5 classes:

<div class="p-5 mb-4 bg-light rounded-3">
    <div class="container py-5">
        <h1 class="display-4">Welcome to Bootstrap 5</h1>
        <p class="lead">This is a simple hero section, similar to the old jumbotron.</p>
        <a class="btn btn-primary btn-lg" href="#">Learn More</a>
    </div>
</div>

Explanation:

.p-5 → Adds padding to the section.
.mb-4 → Adds margin below.
.bg-light → Light gray background.
.rounded-3 → Slightly rounded corners.
.container py-5 → Centers the content with padding.
.display-4 → Large heading style.
.lead → Slightly larger paragraph text.

2. Jumbotron with Background Image

Use a background image to create a stylish hero section.

<div class="p-5 text-white text-center" style="background: url('https://source.unsplash.com/1600x900/?nature') no-repeat center center/cover; height: 400px;">
    <div class="container">
        <h1 class="display-3">Beautiful Nature</h1>
        <p class="lead">Experience the beauty of nature with us.</p>
        <a href="#" class="btn btn-success btn-lg">Explore More</a>
    </div>
</div>

3. Full-Width Jumbotron (Fluid Container)

For a full-width jumbotron, use .container-fluid.

<div class="container-fluid p-5 bg-primary text-white text-center">
    <h1>Full-Width Jumbotron</h1>
    <p>This takes the full width of the screen.</p>
</div>

4. Jumbotron with Overlay Effect

For a dark overlay effect, use CSS gradients.

<div class="p-5 text-white text-center" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://source.unsplash.com/1600x900/?city') no-repeat center center/cover; height: 400px;">
    <h1 class="display-4">City Lights</h1>
    <p class="lead">Discover amazing places with us.</p>
</div>

Conclusion

✔ Bootstrap 5 removed the .jumbotron class, but we can easily create the same effect using utility classes.
✔ You can add background images, full-width layouts, and overlays for a modern design.
✔ The jumbotron-style section is now called a hero section.

Need more examples? Let me know!

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.