Alerts
Basic Example #
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Alerts are available for any length of text, as well as an optional dismiss button.
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark mb-0" role="alert">
A simple dark alert—check it out!
</div>
Dismissible Alerts Example #
Add a dismiss button and the
.alert-dismissible class,
which adds extra padding to the right of
the alert and positions the
.btn-close button.
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
A simple secondary alert—check it out!
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
A simple success alert—check it out!
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
A simple danger alert—check it out!
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
A simple warning alert—check it out!
</div>
<div class="alert alert-info alert-dismissible fade show" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
A simple info alert—check it out!
</div>
<div class="alert alert-light alert-dismissible fade show" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
A simple light alert—check it out!
</div>
<div class="alert alert-dark alert-dismissible fade show mb-0" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
A simple dark alert—check it out!
</div>
Alert Link Example #
Use the .alert-link utility
class to quickly provide matching
colored links within any alert.
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger mb-0" role="alert">
A simple danger alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
Icons Alert Example #
You can also include additional elements like icons, heading, etc along side the actual message.
<div class="alert alert-primary alert-icon" role="alert">
<div class="d-flex align-items-center">
<div class="avatar-sm rounded bg-primary d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
<i class="bx bx-info-circle text-white"></i>
</div>
<div class="flex-grow-1">
A simple primary alert—check it out!
</div>
</div>
</div>
<div class="alert alert-secondary alert-icon" role="alert">
<div class="d-flex align-items-center">
<div class="avatar-sm rounded bg-secondary d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
<i class="bx bx-x-circle text-white"></i>
</div>
<div class="flex-grow-1">
A simple secondary alert—check it out!
</div>
</div>
</div>
<div class="alert alert-success alert-icon" role="alert">
<div class="d-flex align-items-center">
<div class="avatar-sm rounded bg-success d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
<i class="bx bx-check-shield text-white"></i>
</div>
<div class="flex-grow-1">
A simple success alert—check it out!
</div>
</div>
</div>
<div class="alert alert-danger alert-icon mb-0" role="alert">
<div class="d-flex align-items-center">
<div class="avatar-sm rounded bg-danger d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
<i class="bx bx-info-circle text-white"></i>
</div>
<div class="flex-grow-1">
A simple danger alert—check it out!
</div>
</div>
</div>
Additional Content Alert Example #
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
Well done!
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.
Well done!
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-primary mb-3 p-3 mb-xl-0" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p class="mb-0">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.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
<div class="alert alert-secondary p-3 mb-0" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p class="mb-0">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.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>