Bootstrap4 Alert Boxes

Bootstrap 4 makes it easy to implement alert boxes.

Alert boxes can be created using the .alert class, followed by .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, or .alert-dark classes:

Example

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Adding Links in Alerts

To match the color of the alert, add the alert-link class to any links within the alert box:

Example

<div class="alert alert-success">
  <strong>Success!</strong> You should read <a href="#" class="alert-link">this message</a> carefully.
</div>

Closing Alerts

Add the .alert-dismissible class to the alert box, and then add class="close" and data-dismiss="alert" to the close button to enable the close functionality:

Example

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Note: × (×) is the HTML entity character used for the close action, not the letter "x".

Alert Animation

The .fade and .show classes are used to create a fade-in and fade-out effect when closing the alert:

Example

<div class="alert alert-danger alert-dismissible fade show">