Default Style
Brand Alert! You successfully read this important alert message.
Secondary Alert! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Oh snap! Change a few things up and try submitting again.
Warning! Better check yourself, you're not looking too good.
Heads up! This alert needs your attention, but it's not super important.
Rounded Style
Brand Alert! You successfully read this important alert message.
Secondary Alert! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Oh snap! Change a few things up and try submitting again.
Warning! Better check yourself, you're not looking too good.
Heads up! This alert needs your attention, but it's not super important.
Outline Style
This is a primary alert with an example link, and a dismissible button.
This is a secondary alert with an example link, and a dismissible button.
This is a success alert with an example link, and a dismissible button.
This is a danger alert with an example link, and a dismissible button.
This is a warning alert with an example link, and a dismissible button.
This is a info alert with an example link, and a dismissible button.
Alert Icons
<div class="alert alert-primary alert-outline alert-dismissible fade show" role="alert">
<div class="icon"><i class="la la-warning"></i></div>
<div class="text">This is a primary alert with <a href="#" class="alert-link">an example link</a>, and a dismissible button.</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true" class="la la-close"></span>
</button>
</div>
<div class="alert alert-secondary alert-outline alert-dismissible fade show" role="alert">
<div class="icon"><i class="la la-warning"></i></div>
<div class="text">This is a secondary alert with <a href="#" class="alert-link">an example link</a>, and a dismissible button.</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true" class="la la-close"></span>
</button>
</div>
<div class="alert alert-success alert-outline alert-dismissible fade show" role="alert">
This is a success alert with <a href="#" class="alert-link">an example link</a>, and a dismissible button.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true" class="la la-close"></span>
</button>
</div>
<div class="alert alert-danger alert-outline alert-dismissible fade show" role="alert">
This is a danger alert with <a href="#" class="alert-link">an example link</a>, and a dismissible button.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true" class="la la-close"></span>
</button>
</div>
<div class="alert alert-warning alert-outline alert-dismissible fade show" role="alert">
This is a warning alert with <a href="#" class="alert-link">an example link</a>, and a dismissible button.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true" class="la la-close"></span>
</button>
</div>
<div class="alert alert-info alert-outline alert-dismissible fade show" role="alert">
This is a info alert with <a href="#" class="alert-link">an example link</a>, and a dismissible button.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true" class="la la-close"></span>
</button>
</div>
This is a primary alert with an example link, and a dismissible button.
This is a secondary alert with an example link, and a dismissible button.
This is a success alert with an example link, and a dismissible button.
This is a danger alert with an example link, and a dismissible button.
This is a warning alert with an example link, and a dismissible button.
This is a info alert with an example link, and a dismissible button.