Advertisement
Google Ad Slot: content-top
Bootstrap 5 Alert
In Bootstrap 5, alerts are used to display feedback messages in a visually appealing and dismissible format. Here's how to implement and customize alerts:
Example
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is an info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>
Dismissible Alert:
Add the .alert-dismissible and .fade show classes along with a close button.
.fade show: Adds a smooth fading effect.data-bs-dismiss="alert": Enables the dismiss functionality.
Example
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning!</strong> This is a dismissible alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Alerts with Links:
Include hyperlinks inside alerts by wrapping text with <a> tags and using .alert-link.
Example
<div class="alert alert-info" role="alert">
Visit our <a href="#" class="alert-link">documentation</a> to learn more.
</div>