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 eight theme color names as .alert-{color}.

1. Basic Alert Colors: .alert + .alert-{color}

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

<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

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

<div class="alert alert-warning alert-dismissible" role="alert">
  Heavy rain expected on this trail today.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

3. Links Inside Alerts: .alert-link

.alert-link colors a link to match the alert's own text color and adds an underline on hover, 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">
  <strong>Trail submitted successfully!</strong>
  It's now pending review — <a href="#" class="alert-link">track its status here</a>.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>