Skip to content

Bootstrap Alerts

Alerts communicate important status messages to users. This lesson covers the alert color variants, dismissible alerts, and combining alerts with icons and links.

Bootstrap Alerts Overview

An .alert combined with a contextual modifier like alert-success or alert-danger produces a styled message box using Bootstrap's theme colors, ideal for confirmations, warnings, and errors. Alerts can include headings, paragraphs, and .alert-link styled links that inherit a contrasting but related color.

Adding alert-dismissible along with a .btn-close button and the Bootstrap Alert JavaScript plugin lets users close a message manually, while data-bs-dismiss="alert" wires up that dismiss behavior without any custom script.

Concept Description Common Usage
alert-{color} Contextual background/text color combination Success, error, warning, or info messages
alert-dismissible Adds spacing for a close button User-dismissible notifications
data-bs-dismiss="alert" Wires up the close button behavior Removing the alert from the DOM on click
.alert-link Styled link matching the alert's color theme Calls to action inside an alert
alert-heading Styled heading for longer alert content Multi-line alerts with a title and description

Bootstrap Alerts Example

<div class="alert alert-success d-flex align-items-center" role="alert">
  <i class="bi bi-check-circle-fill me-2"></i>
  <div>Your changes have been saved successfully.</div>
</div>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Storage almost full.</strong> <a href="/billing" class="alert-link">Upgrade your plan</a> to add more space.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

The success alert combines an icon with a message using flex alignment for a clean, single-line layout. The warning alert is dismissible, includes an alert-link for a related action, and uses data-bs-dismiss="alert" on its close button so clicking it removes the message without any custom JavaScript.

Top 10 Bootstrap Alerts Examples

These are the alert patterns you'll use to communicate status and feedback throughout an app.

# Example Syntax
1 Success alert <div class="alert alert-success">Saved!</div>
2 Danger/error alert <div class="alert alert-danger">Something went wrong.</div>
3 Warning alert <div class="alert alert-warning">Please review your input.</div>
4 Info alert <div class="alert alert-info">New feature available.</div>
5 Dismissible alert <div class="alert alert-primary alert-dismissible fade show">...<button class="btn-close" data-bs-dismiss="alert"></button></div>
6 Alert with heading <div class="alert alert-success"><h4 class="alert-heading">Well done!</h4><p>Details here.</p></div>
7 Alert with link <a href="#" class="alert-link">Learn more</a>
8 Alert with icon <div class="alert alert-info d-flex align-items-center"><i class="bi bi-info-circle-fill me-2"></i>Note</div>
9 Alert with divider <div class="alert alert-warning"><p>Text</p><hr><p class="mb-0">More text</p></div>
10 Light/dark theme alert <div class="alert alert-secondary">Neutral message</div>

Best Practices

  • Match alert color to the actual severity: success for confirmations, danger for errors, warning for caution.
  • Add role="alert" so assistive technology announces the message appropriately.
  • Use alert-dismissible only for non-critical messages users can safely ignore or close.
  • Pair alerts with icons for faster visual recognition of the message type.
  • Keep alert text concise; use alert-heading and a paragraph only when more context is truly needed.
  • Use alert-link instead of default link styling so links match the alert's color scheme.
  • Avoid stacking too many alerts at once, which can overwhelm the page.

Common Mistakes

  • Using alert-danger for non-error messages, which trains users to ignore genuine warnings.
  • Forgetting data-bs-dismiss="alert" on the close button, so it renders but doesn't do anything.
  • Not including role="alert", missing an accessibility signal for dynamic content.
  • Leaving dismissible alerts without the fade and show classes, breaking the closing transition.
  • Overusing alerts for information that would read better as inline form-text or tooltips.
  • Styling custom links inside alerts instead of using the built-in alert-link class.

Key Takeaways

  • alert-{color} applies Bootstrap's theme palette to contextual status messages.
  • alert-dismissible plus data-bs-dismiss="alert" enables a working close button.
  • alert-link and alert-heading style links and titles to match the alert's theme.
  • role="alert" helps assistive technology announce important messages.
  • Choosing the correct alert color for the situation preserves its communicative value.

Pro Tip

For time-sensitive banners like trial expirations, combine a warning alert with an alert-link call to action instead of a separate button, keeping the whole message compact and scannable.

You now understand Bootstrap's alert component. Continue to Bootstrap Badges to display small counts and labels.