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.

<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 -->
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav