BBS5 Alerts

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.

<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>

<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>