Basic Alerts
Use one of the four required contextual classes.
<div class="alert alert-success" role="alert">
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
<span aria-hidden="true">×</span>
</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
<span aria-hidden="true">×</span>
</button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
<span aria-hidden="true">×</span>
</button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger mg-b-0" role="alert">
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
<span aria-hidden="true">×</span>
</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
Outline Alerts
Use one of the four required contextual classes.
<div class="alert alert-outline-success" role="alert">
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
<span aria-hidden="true">×</span></button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-outline-info" role="alert">
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
<span aria-hidden="true">×</span></button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-outline-warning" role="alert">
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
<span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-outline-danger mg-b-0" role="alert">
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
<span aria-hidden="true">×</span></button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
Solid Colored Alerts
Use one of the four required contextual classes.
<div class="alert alert-solid-success" role="alert">
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
<span aria-hidden="true">×</span></button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-solid-info" role="alert">
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
<span aria-hidden="true">×</span></button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-solid-warning" role="alert">
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
<span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-solid-danger mg-b-0" role="alert">
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
<span aria-hidden="true">×</span></button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
Link color Alerts
Use the .alert-link
utility class to quickly provide matching colored links within any alert.
<div class="alert alert-primary" role="alert">
This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark mb-0" role="alert">
This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
Additional Content Alert
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-success mb-0" 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>
Dismissing Alerts
Using the alert JavaScript plugin, it’s possible to dismiss any alert inline.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<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 fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<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 fade show mb-0" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
Alert With Icon
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
<div class="alert alert-default" role="alert">
<span class="alert-inner--icon"><i class="fe fe-download"></i></span>
<span class="alert-inner--text"><strong>Default!</strong> This is a warning alert—check it out that has an icon too!</span>
</div>
<div class="alert alert-primary" role="alert">
<span class="alert-inner--icon"><i class="fe fe-check-square"></i></span>
<span class="alert-inner--text"><strong>Primary!</strong> This is a warning alert—check it out that has an icon too!</span>
</div>
<div class="alert alert-success" role="alert">
<span class="alert-inner--icon"><i class="fe fe-thumbs-up"></i></span>
<span class="alert-inner--text"><strong>Success!</strong> This is a warning alert—check it out that has an icon too!</span>
</div>
<div class="alert alert-info" role="alert">
<span class="alert-inner--icon"><i class="ti-bell"></i></span>
<span class="alert-inner--text"><strong>Info!</strong> This is a warning alert—check it out that has an icon too!</span>
</div>
<div class="alert alert-warning" role="alert">
<span class="alert-inner--icon"><i class="fe fe-info"></i></span>
<span class="alert-inner--text"><strong>Warning!</strong> This is a warning alert—check it out that has an icon too!</span>
</div>
<div class="alert alert-danger mb-0" role="alert">
<span class="alert-inner--icon"><i class="fe fe-slash"></i></span>
<span class="alert-inner--text"><strong>Danger!</strong> This is a warning alert—check it out that has an icon too!</span>
</div>
Alert With Icon Dismissing
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
<div class="alert alert-default alert-dismissible fade show" role="alert">
<span class="alert-inner--icon"><i class="fe fe-download"></i></span>
<span class="alert-inner--text"><strong>Default!</strong> This is a default alert—check it out!</span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<span class="alert-inner--icon"><i class="fe fe-check-square"></i></span>
<span class="alert-inner--text"><strong>Primary!</strong> This is a primary alert—check it out!</span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<span class="alert-inner--icon"><i class="fe fe-thumbs-up"></i></span>
<span class="alert-inner--text"><strong>Success!</strong> This is a success alert—check it out!</span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<span class="alert-inner--icon"><i class="fe fe-info"></i></span>
<span class="alert-inner--text"><strong>Warning!</strong> This is a warning alert—check it out!</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 fade show" role="alert">
<span class="alert-inner--icon"><i class="ti-bell"></i></span>
<span class="alert-inner--text"><strong>Info!</strong> This is a info alert—check it out!</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 fade show mb-0" role="alert">
<span class="alert-inner--icon"><i class="fe fe-slash"></i></span>
<span class="alert-inner--text"><strong>Danger!</strong> This is a danger alert—check it out!</span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>