Bootstrap 5 Warning

Warning

Bootstrap 5 provides a simple method for creating predefined warning messages:

Alert boxes are created using the .alert class followed by one of the context classes:

  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light
  • .alert-dark

Example

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

Try It Yourself

Alert Link

The .alert-link The class added to any link within the alert box can create a "matching colored link":

Example

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

Try It Yourself

Close Alert

To close the alert message, please add .alert-dismissible The class is added to the alert container. Then add class="btn-close" and data-bs-dismiss="alert" Add to link or button elements (the alert box will disappear when you click it).

Example

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Success!</strong>This alert box indicates a successful or positive action.
</div>

Try It Yourself

Alert Box Animation

.fade and .show The class adds a fade-in and fade-out effect when closing the alert message:

Example

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

Try It Yourself