Bootstrap

Bootstrap Jumbotron

What Is a Jumbotron?

A Jumbotron is essentially a large box or container that holds important content such as a headline, supporting text, and a button. It usually spans the full width of its parent container or the viewport.

️ How to Create a Jumbotron in Bootstrap 5

Since Bootstrap 5 dropped the .jumbotron class, you can easily create a similar effect by combining .p-5 (padding), .mb-4 (margin-bottom), background utilities, and rounded corners.

html
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Welcome to Our Website!</h1>
<p class="col-md-8 fs-4">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<button class="btn btn-primary btn-lg" type="button">Learn More</button>
</div>
</div>

Explanation:

  • .p-5: Adds generous padding around the container.

  • .mb-4: Adds space below the jumbotron.

  • .bg-light: Applies a light background color.

  • .rounded-3: Adds slightly rounded corners for a smooth look.

  • .display-5: Large headline text.

  • .fw-bold: Makes the headline bold.

  • .col-md-8: Limits the paragraph width on medium+ screens.

  • .btn-lg: Large button for prominence.

Customizing Your Jumbotron

You can customize the background color by replacing .bg-light with other contextual classes like .bg-primary, .bg-success, or .bg-warning, and adjust text colors for contrast.

html
<div class="p-5 mb-4 bg-primary text-white rounded-3">
<!-- Content here -->
</div>

✅ Conclusion

Even though Bootstrap 5 no longer includes a dedicated jumbotron component, it’s easy to recreate similar impactful hero sections using spacing, background, and typography utility classes. This approach provides more flexibility and cleaner markup, enabling you to tailor your design exactly as needed.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *