Alerts

Use alerts to provide contextual feedback to your users based on their input and behaviour

Alerts

Alerts can be used to show your users error, success, informational or warning messages. Use the color variables such as alert-primary or alert-secondary to add your preferred colors:

<div class="row justify-content-center">
    <div class="col-12 col-md-10">
        <div class="alert alert-secondary shadow-soft" role="alert">
            <span class="alert-inner--text">This is a secondary alert with <a href="#" class="alert-link">an
                    example link</a>. Give it a click if you like.</span>
        </div>
        <div class="alert alert-success shadow-soft" role="alert">
            <span class="alert-inner--text">This is a success alert with <a href="#" class="alert-link">an
                    example link</a>. Give it a click if you like.</span>
        </div>
        <div class="alert alert-info shadow-soft" role="alert">
            <span class="alert-inner--text">This is a info alert with <a href="#" class="alert-link">an
                    example link</a>. Give it a click if you like.</span>
        </div>
        <div class="alert alert-danger shadow-soft" role="alert">
            <span class="alert-inner--text">This is a danger alert with <a href="#" class="alert-link">an
                    example link</a>. Give it a click if you like.</span>
        </div>
    </div>
</div>

Icons

The following alerts are coupled with descriptive icons:

<div class="alert alert-secondary alert-dismissible shadow-soft fade show" role="alert">
    <span class="alert-inner--icon"><span class="fas fa-exclamation-circle"></span></span>
    <span class="alert-inner--text"><strong>Warning!</strong> Better check yourself, you're not
        looking too good.</span>
    <button type="button" class="close text-dark" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-success alert-dismissible shadow-soft fade show" role="alert">
    <span class="alert-inner--icon"><span class="far fa-thumbs-up"></span></span>
    <span class="alert-inner--text"><strong>Well done!</strong> You successfully read this
        important alert message.</span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-info alert-dismissible shadow-soft fade show" role="alert">
    <span class="alert-inner--icon"><span class="far fa-bell"></span></span>
    <span class="alert-inner--text"><strong>Heads up!</strong>This alert needs your attention,
        but it's not super important.</span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-danger alert-dismissible shadow-soft fade show" role="alert">
    <span class="alert-inner--icon"><span class="fas fa-fire"></span></span>
    <span class="alert-inner--text"><strong>Oh snap!</strong> Change a few things up and try
        submitting again.</span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

Extra content Pro

The following alerts are useful when you want to give more information and context to your users:

<div class="alert alert-secondary shadow-soft mb-4 mb-lg-5" role="alert">
    <span class="alert-inner--icon icon-lg"><span class="fas fa-exclamation-circle"></span></span>
    <span class="alert-heading">Warning!</span>
    <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>
<div class="alert alert-success shadow-soft mb-4 mb-lg-5" role="alert">
    <span class="alert-inner--icon icon-lg"><span class="far fa-thumbs-up"></span></span>
    <span class="alert-heading">Well done!</span>
    <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>
<div class="alert alert-info shadow-soft mb-4 mb-lg-5" role="alert">
    <span class="alert-inner--icon icon-lg"><span class="far fa-bell"></span></span>
    <span class="alert-heading">Heads up!</span>
    <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>
<div class="alert alert-danger shadow-soft mb-4 mb-lg-5" role="alert">
    <span class="alert-inner--icon icon-lg"><span class="fas fa-fire"></span></span>
    <span class="alert-heading">Danger!</span>
    <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>

Shadow inset Pro

<div class="alert alert-success shadow-inset" role="alert">
    <span class="alert-inner--text">This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span>
</div>
<div class="alert alert-secondary shadow-inset" role="alert">
    <span class="alert-inner--text">This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span>
</div>
<div class="alert alert-info shadow-inset" role="alert">
    <span class="alert-inner--text">This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span>
</div>
<div class="alert alert-danger shadow-inset" role="alert">
    <span class="alert-inner--text">This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span>
</div>