Alerts

Alerts

Alerts are boxes that show messages to the user. They are created with the .alert class plus a contextual class.

Alert colors

Example

<div class="alert alert-success">
  <strong>Success!</strong> This alert box indicates a successful action.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> This alert box indicates a dangerous action.
</div>

Closing alerts

Add .alert-dismissible and a close button to let users dismiss the alert:

<div class="alert alert-warning alert-dismissible fade show">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Warning!</strong> This alert box could indicate a warning.
</div>

The data-bs-dismiss="alert" attribute tells Bootstrap to close the alert when clicked. The .fade and .show classes give a smooth fade animation.

Links in alerts

Use the .alert-link class on links inside alerts to match the alert color:

<div class="alert alert-info">
  This is an info alert with an <a href="#" class="alert-link">important link</a>.
</div>

TL;DR

• Alerts use .alert plus a contextual color class.
• .alert-dismissible with a close button lets users dismiss.
• .alert-link colors links to match the alert.
• .fade show adds a fade animation.