« Previous Next »

Alerts

With Bootstrap 5, you can easily use ready-made alert messages

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary! Indicates an important action.
Secondary! Indicates a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.

Alerts in Bootstrap are made using the .alert class along with contextual classes like .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, or .alert-dark.


Example

Output :

Alert Links

Add the .alert-link class to any links inside the alert box to create "matching colored links":

Output :

Closing Alerts

To make an alert message closable, add the .alert-dismissible class to the alert container. After that, use class="btn-close" and data-bs-dismiss="alert" on a button or link element — clicking it will remove the alert box from view.

Output :

Animated Alerts

The .fade and .show and data-bs-dismiss="alert" classes adds a fading effect when closing the alert message:

Output :
« Previous Next »