Jumbotron (Legacy) & Alerts

Bootstrap 4 had a .jumbotron component. It was removed in Bootstrap 5. The modern replacement is a hero section: a big .container or .container-fluid with utility classes like .bg-light, .py-5, .display-4, and .lead.

Jumbotron — legacy note → use hero instead

Older Bootstrap tutorials still mention jumbotron for history — on BS5 projects, build heroes with utilities, not .jumbotron.

Real-life example: Jumbotron was like a fixed welcome arch at a park entrance. Now you build your own arch with banners (.bg-primary), big text (.display-4), and spacing (.py-5).

Hero section (BS5 replacement for jumbotron)

<div class="bg-primary text-white text-center py-5 mb-4">
  <div class="container">
    <h1 class="display-4 fw-bold">Learn Bootstrap 5</h1>
    <p class="lead">Build responsive sites faster with ready-made components.</p>
    <a class="btn btn-light btn-lg" href="#">Get Started</a>
  </div>
</div>

Alerts

Alerts show important messages. Use .alert with .alert-primary, .alert-success, .alert-warning, .alert-danger, etc. Add .alert-dismissible and a close button for dismissible alerts.

Use the role="alert" attribute for screen readers.

Real-life example: Alerts are like announcement slips on a school notice board — green for success, yellow for warning, red for urgent.

Alert variants

<div class="alert alert-success" role="alert">
  Profile saved successfully!
</div>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Your session expires in 5 minutes.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>