Alerts

Alerts are full-width, boxed messages for feedback about an action a user just took — a successfully-saved form, a validation error, a warning about an upcoming change. Like badges, the base look is pure CSS; the "dismiss with an X button" behavior is the one thing here that needs a line of Bootstrap 5's own JavaScript, and it's triggered entirely through an HTML data attribute — still zero jQuery.

1. Base Alert and Color Variants

.alert plus role="alert" gives the box shape and announces it to screen readers as soon as it appears; add .alert-{color} for the theme color.

<div class="alert alert-primary" role="alert">A simple primary alert.</div>
<div class="alert alert-success" role="alert">A simple success alert.</div>
<div class="alert alert-danger" role="alert">A simple danger alert.</div>
<div class="alert alert-warning" role="alert">A simple warning alert.</div>

2. Dismissible Alerts: .alert-dismissible + data-bs-dismiss

Add .alert-dismissible to the alert, extra right padding is added automatically to make room for a close button, then place a <button> with class .btn-close and data-bs-dismiss="alert" inside it. Clicking that button is handled entirely by Bootstrap 5's plain-JavaScript bundle reading the data attribute — there is no jQuery anywhere in this interaction, unlike the equivalent in Bootstrap 3/4.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Heads up!</strong> Trail conditions have changed since your last visit.
  <button type="button" class="btn-close"
    data-bs-dismiss="alert" aria-label="Close"></button>
</div>

3. Alert Links: .alert-link

A plain <a> inside a colored alert usually renders in a color that clashes or is hard to read. .alert-link recolors it to a shade that matches the alert and stays legible.

<div class="alert alert-info" role="alert">
  A new version of the trail guide is available.
  <a href="#" class="alert-link">See what's new</a>.
</div>

4. Worked Example: TrailMap "Trail Submitted Successfully!"

After a hiker submits a new trail on TrailMap, the confirmation page shows a dismissible success alert with a link back to browse the site, using every piece covered above together.

<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Trail submitted successfully!</strong>
  It's now pending review and should appear in search within 24 hours.
  <a href="#" class="alert-link">Browse other trails</a> while you wait.
  <button type="button" class="btn-close"
    data-bs-dismiss="alert" aria-label="Close"></button>
</div>