With Bootstrap 5, you can easily use ready-made alert messages
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.
Add the .alert-link
class to any links inside the alert box to create "matching colored links":
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.
The .fade
and .show
and data-bs-dismiss="alert"
classes adds a fading effect when closing the alert message: