<!-- Primary alert -->
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Secondary alert -->
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Success alert -->
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Danger alert -->
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Warning alert -->
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Info alert -->
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Light alert -->
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Dark alert -->
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>// Primary alert
.alert.alert-primary(role="alert")
| A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Secondary alert
.alert.alert-secondary(role="alert")
| A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Success alert
.alert.alert-success(role="alert")
| A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Danger alert
.alert.alert-danger(role="alert")
| A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Warning alert
.alert.alert-warning(role="alert")
| A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Info alert
.alert.alert-info(role="alert")
| A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Light alert
.alert.alert-light(role="alert")
| A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Dark alert
.alert.alert-dark(role="alert")
| A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
<!-- Primary alert -->
<div class="alert alert-primary" role="alert">
<div class="alert-icon-box">
<i class="alert-icon" data-feather="bell"></i>
</div>
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Secondary alert -->
<div class="alert alert-secondary" role="alert">
<div class="alert-icon-box">
<i class="alert-icon" data-feather="clock"></i>
</div>
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Success alert -->
<div class="alert alert-success" role="alert">
<div class="alert-icon-box">
<i class="alert-icon" data-feather="check-circle"></i>
</div>
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Danger alert -->
<div class="alert alert-danger" role="alert">
<div class="alert-icon-box">
<i class="alert-icon" data-feather="slash"></i>
</div>
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Warning alert -->
<div class="alert alert-warning" role="alert">
<div class="alert-icon-box">
<i class="alert-icon" data-feather="alert-triangle"></i>
</div>
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Info alert -->
<div class="alert alert-info" role="alert">
<div class="alert-icon-box">
<i class="alert-icon" data-feather="info"></i>
</div>
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Light alert -->
<div class="alert alert-light" role="alert">
<div class="alert-icon-box">
<i class="alert-icon" data-feather="archive"></i>
</div>
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Dark alert -->
<div class="alert alert-dark" role="alert">
<div class="alert-icon-box">
<i class="alert-icon" data-feather="alert-octagon"></i>
</div>
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>// Primary alert
.alert.alert-primary.alert-with-icon(role="alert")
.alert-icon-box
i(data-feather="bell").alert-icon
| A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Secondary alert
.alert.alert-secondary.alert-with-icon(role="alert")
.alert-icon-box
i(data-feather="clock").alert-icon
| A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Success alert
.alert.alert-success.alert-with-icon(role="alert")
.alert-icon-box
i(data-feather="check-circle").alert-icon
| A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Danger alert
.alert.alert-danger.alert-with-icon(role="alert")
.alert-icon-box
i(data-feather="slash").alert-icon
| A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Warning alert
.alert.alert-warning.alert-with-icon(role="alert")
.alert-icon-box
i(data-feather="alert-triangle").alert-icon
| A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Info alert
.alert.alert-info.alert-with-icon(role="alert")
.alert-icon-box
i(data-feather="info").alert-icon
| A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Light alert
.alert.alert-light.alert-with-icon(role="alert")
.alert-icon-box
i(data-feather="archive").alert-icon
| A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Dark alert
.alert.alert-dark.alert-with-icon(role="alert")
.alert-icon-box
i(data-feather="alert-octagon").alert-icon
| A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
<!-- Primary alert -->
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<span class="font-weight-semibold">Primary alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Secondary alert -->
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
<span class="font-weight-semibold">Secondary alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Success alert -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
<span class="font-weight-semibold">Success alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Danger alert -->
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<span class="font-weight-semibold">Danger alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Warning alert -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<span class="font-weight-semibold">Warning alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Info alert -->
<div class="alert alert-info alert-dismissible fade show" role="alert">
<span class="font-weight-semibold">Info alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Light alert -->
<div class="alert alert-light alert-dismissible fade show" role="alert">
<span class="font-weight-semibold">Light alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Dark alert -->
<div class="alert alert-dark alert-dismissible fade show" role="alert">
<span class="font-weight-semibold">Dark alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>// Primary alert
.alert.alert-primary.alert-dismissible.fade.show(role="alert")
| <span class="font-weight-semibold">Primary alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-dismiss="alert", aria-label="Close").close
span(aria-hidden="true") ×
// Secondary alert
.alert.alert-secondary.alert-dismissible.fade.show(role="alert")
| <span class="font-weight-semibold">Secondary alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-dismiss="alert", aria-label="Close").close
span(aria-hidden="true") ×
// Success alert
.alert.alert-success.alert-dismissible.fade.show(role="alert")
| <span class="font-weight-semibold">Success alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-dismiss="alert", aria-label="Close").close
span(aria-hidden="true") ×
// Danger alert
.alert.alert-danger.alert-dismissible.fade.show(role="alert")
| <span class="font-weight-semibold">Danger alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-dismiss="alert", aria-label="Close").close
span(aria-hidden="true") ×
// Warning alert
.alert.alert-warning.alert-dismissible.fade.show(role="alert")
| <span class="font-weight-semibold">Warning alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-dismiss="alert", aria-label="Close").close
span(aria-hidden="true") ×
// Info alert
.alert.alert-info.alert-dismissible.fade.show(role="alert")
| <span class="font-weight-semibold">Info alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-dismiss="alert", aria-label="Close").close
span(aria-hidden="true") ×
// Light alert
.alert.alert-light.alert-dismissible.fade.show(role="alert")
| <span class="font-weight-semibold">Light alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-dismiss="alert", aria-label="Close").close
span(aria-hidden="true") ×
// Dark alert
.alert.alert-dark.alert-dismissible.fade.show(role="alert")
| <span class="font-weight-semibold">Dark alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-dismiss="alert", aria-label="Close").close
span(aria-hidden="true") ×
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.
<!-- Success alert -->
<div class="alert alert-success" role="alert">
<h4 class="pt-2 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="pt-3 mb-2">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>// Success alert
.alert.alert-success(role="alert")
h4.pt-2.alert-heading Well done!
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.
hr
p.pt-3.mb-2 Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<!-- Alert with bakground image -->
<div class="alert alert-bg-image alert-dismissible fade show text-center py-5" style="background-image: url(path-to-image)" role="alert">
<i class="d-block text-white my-3 mx-auto" data-feather="clock" style="width: 3.125rem; height: 3.125rem;"></i>
<h2 class="text-white text-shadow">Check Our Limited Offers!</h2>
<h4 class="text-white text-shadow mb-4 pb-2">Save up to 50%</h4>
<a href="#" class="btn btn-primary mb-3">View offers</a>
<button type="button" class="close text-white" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
// Alert with bakground image
.alert.alert-bg-image.alert-dismissible.fade.show.text-center.py-5(style="background-image: url(path-to-image)" role="alert")
i(data-feather="clock" width="50" height="50").d-block.text-white.my-3.mx-auto
h2.text-white.text-shadow Check Our Limited Offers!
h4.text-white.text-shadow.mb-4.pb-2 Save up to 50%
a(href="#").btn.btn-primary.mb-3 View offers
button(type="button" data-dismiss="alert" aria-label="Close").close.text-white
span(aria-hidden="true") ×