Alerts

An alert is a colored message box for feedback — a success confirmation, a validation warning, an informational note. Every alert starts with the base .alert class plus one of the contextual style names as .alert-{style}.

Only four styles in Bootstrap 3. Unlike later versions, Bootstrap 3 ships exactly four alert styles: .alert-success, .alert-info, .alert-warning, and .alert-danger. There is no .alert-primary, .alert-secondary, .alert-light, or .alert-dark — those were added when Bootstrap 4 expanded the shared color palette to eight names.

1. Basic Alert Styles: .alert + .alert-{style}

Give the wrapper role="alert" so assistive technology announces it correctly.

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

2. Dismissible Alerts

Add .alert-dismissible to the alert, then place a close button inside it with data-dismiss="alert". Bootstrap 3's jQuery plugin handles the fade-out and removal — no custom JavaScript needed. 

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  Heavy rain expected on this trail today.
</div>
data-dismiss, not data-bs-dismiss. Bootstrap 3's close button reads the plain data-dismiss="alert" attribute through jQuery. Bootstrap 5 later namespaced this to data-bs-dismiss="alert" and dropped the jQuery dependency entirely — the two attribute names are not interchangeable across versions.

3. Links Inside Alerts: .alert-link

.alert-link colors a link to match the alert's own text color, so a call-to-action link doesn't clash with the alert's background. 

<div class="alert alert-info" role="alert">
  This trail has a new report. <a href="#" class="alert-link">Read it here.</a>
</div>

4. Worked Example: TrailMap Submission Success Alert

After a hiker submits a new trail, TrailMap shows a dismissible success alert at the top of the page confirming the submission went through. 

<div class="alert alert-success alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Trail submitted successfully!</strong>
  It's now pending review — <a href="#" class="alert-link">track its status here</a>.
</div>
Next up: alerts handle one-off messages; for grouping repeatable content with a heading, body, and footer, head to Panels — the first of three separate Bootstrap 3 components that a later version merged into one Card.