Alerts
Dismissable Alerts
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, alternatively for a white close button add .btn-close .btn-close-white text.
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
<strong>Primary - </strong> A simple primary alert—check it out!
</div><!-- / alert-dismissable -->
<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>
<strong>Secondary - </strong> A simple secondary alert—check it out!
</div><!-- / alert-dismissable -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
<strong>Success - </strong> A simple success alert—check it out!
</div><!-- / alert-dismissable -->
<div class="alert alert-info alert-dismissible fade show" role="alert">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
<strong>Info - </strong> A simple info alert—check it out!
</div><!-- / alert-dismissable -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
<strong>Warning - </strong> A simple warning alert—check it out!
</div><!-- / alert-dismissable -->
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
<strong>Primary - </strong> A simple danger alert—check it out!
</div><!-- / alert-dismissable -->
Alerts with Icons
You can also include additional elements like icons, heading, etc along side the actual message.
<div class="alert alert-success alert-dismissible fade show" role="alert">
<span class="bi-check-circle fs-20 mr-10"></span> <span><strong>Success -</strong> A simple success alert—check it out!</span>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div><!-- / alert -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<span class="bi-exclamation-triangle fs-20 mr-10"></span> <span><strong>Warning -</strong> A simple warning alert—check it out!</span>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div><!-- / alert -->
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<span class="bi-exclamation-octagon fs-20 mr-10"></span> <span><strong>Danger -</strong> A simple danger alert—check it out!</span>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div><!-- / alert -->
Additional Content
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.
<div class="alert alert-info" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>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><!-- / alert -->