Bootstrap 5 TutorialLesson 10Free preview
BS5 Jumbotron
This lesson is part of Bootstrap · All levels
Summary
Jumbotron, a large gray-packed box to display the hero section, has been removed from Bootstrap 5. Its replacement is to use built-in utilities such as .p-5, .bg-body-tertiary, and .rounded-3 on a div to create similar effects. For the larger title add .display-5 and .fw-bold to make it stand out.
Key points
- The .jumbotron component is no longer available in Bootstrap 5.
- The jumbotron effect can be created with the utility .p-5, .bg-body-tertiary, .rounded-3.
- Add .display-5 for the main title and .text-muted for the secondary text.
- It helps center the content of the hero section. (.container)
- The utility approach makes layout more flexible than the specialized components.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.