BBS5 Alerts

Learn how to create alerts in Bootstrap 5.

BS5 Alerts

Alerts provide a way to style messages to the user. They are built with the .alert class, followed by a contextual color class.

  • .alert-success, .alert-info, .alert-warning, .alert-danger, etc.

Alert Links

Add the .alert-link class to any links inside the alert box to create a matching colored link.

Closing Alerts

To close the alert message, add a .alert-dismissible class to the alert container. Then add class="btn-close" and data-bs-dismiss="alert" to a button or link element.

Examples

Basic Alerts

html/css

Success and Info alerts.

<div class="alert alert-success">
  <strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
  <strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>

Dismissible Alert

html/css

An alert that can be closed by the user.

<div class="alert alert-danger alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>

Test Your Knowledge

1. Which class is needed to create an alert?

2. How do you add a close button to an alert?