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:
This is a secondary alert with an
example link. Give it a click if you like.
This is a success alert with an
example link. Give it a click if you like.
This is a info alert with an
example link. Give it a click if you like.
This is a danger alert with an
example link. Give it a click if you like.
<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:
Warning! Better check yourself, you're not
looking too good.
Well done! You successfully read this
important alert message.
Heads up!This alert needs your attention,
but it's not super important.
Oh snap! Change a few things up and try
submitting again.
<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">×</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">×</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">×</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">×</span>
</button>
</div>Extra content Pro
The following alerts are useful when you want to give more information and context to your users:
Warning!
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.
Heads up!
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.
Danger!
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-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
This is a success alert with an example link. Give it a click if you like.
This is a warning alert with an example link. Give it a click if you like.
This is a info alert with an example link. Give it a click if you like.
This is a danger alert with an example link. Give it a click if you like.
<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>