BS5 Alerts
Bootstrap 5 Alerts
An easy way to construct predefined alert messages is offered by Bootstrap 5:
==== LIVE ANIMATION MUKAVU ====
The .alert class is used to produce alerts, which are then followed by one of the contextual classes (.alert-primary, .alert-secondary, .alert-light, .alert-dark, .alert-success, .alert-info, .alert-warning, .alert-danger):
Example
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Alert Links
Create “matching colored links” by giving any links inside the alert box the alert-link class:
Example
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Closing Alerts
==== LIVE ANIMATION MUKAVU ====
Include a .alert-dismissible class in the alert container to end the alert message. Next, give a link or button element class=”close” and data-dismiss=”alert” so that the alert box vanishes when a user clicks on it.
Example
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Tip: The HTML entity × (×) is the recommended icon for close buttons instead of the letter “x”.
See our HTML Entities Reference for a complete list of all HTML entities.
Animated Alerts
A fading effect is added when the alert message is closed via the .fade and .show classes:
Example
<div class="alert alert-danger alert-dismissible fade show">
