Bootstrap 5 alerts provide a flexible and visually appealing way to communicate important information to users. By utilizing various alert classes, we can easily create dynamic notifications, warnings, or messages within their web applications.

Preview:

Syntax:

<div class="alert alert-primary" role="alert">
  Explore this primary alert message!
</div>
<div class="alert alert-secondary" role="alert">
  Discover this secondary alert message!
</div>
<div class="alert alert-success" role="alert">
  Experience this success alert message!
</div>
<div class="alert alert-danger" role="alert">
  Encounter this danger alert message!
</div>
<div class="alert alert-warning" role="alert">
  Observe this warning alert message!
</div>
<div class="alert alert-info" role="alert">
  Learn from this info alert message!
</div>
<div class="alert alert-light" role="alert">
  Witness this light alert message!
</div>
<div class="alert alert-dark" role="alert">
  Perceive this dark alert message!
</div>

The below table illustrates the alert classes in Bootstrap 5 alongside their corresponding descriptions.