Alerts are one of the most common UI components in web development. They are used to provide contextual feedback messages for typical user actions (like a successful login, a form error, or a warning message).
To create an alert, simply use the .alert class, followed by one of the eight contextual color classes (e.g., .alert-success or .alert-danger).
<!-- Applying the alert and a contextual color -->
<div class="alert alert-success" role="alert">
Your profile was updated successfully!
</div>
<div class="alert alert-danger" role="alert">
Error: Could not process your credit card.
</div>If you put a standard HTML link (<a>) inside an alert, it will clash terribly with the background color.
To fix this, Bootstrap offers the .alert-link utility class. Applying this class to any anchor tag inside an alert automatically matches the link's text color precisely to the surrounding alert theme.
<div class="alert alert-primary" role="alert">
You have a new message. <a href="#" class="alert-link">Read it here</a>.
</div>Alerts aren't strictly for single lines of text. You can format large chunks of HTML—including headings, paragraphs, and divider lines—directly inside of them. The alert will automatically colorize nested elements beautifully.
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Account Verified!</h4>
<p>Thank you for verifying your email address. You now have full access.</p>
<hr>
<p class="mb-0">Enjoy exploring our platform.</p>
</div>Often, you want users to be able to "X out" or close an alert once they are done reading it.
To build a dismissible alert, you must do the following:
.alert-dismissible class to the outer container..fade and .show classes to make it animate smoothly when it closes.<button> inside the alert using the .btn-close class and the data-bs-dismiss="alert" attribute.bootstrap.bundle.min.js) to be loaded at the bottom of your page in order to function!
<!-- A fully dismissible, animated alert banner -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning!</strong> Your trial expires in 3 days.
<!-- The "X" button -->
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>