Toasts
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Basic example
Bootstrap
11 mins agoHello, world! This is a toast message.
<!-- Basic toast example (remove fade show to hide toast initially) -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<div class="d-inline-block align-middle bg-primary rounded-sm mr-2" style="width: 1.25rem; height: 1.25rem;"></div>
<h6 class="font-size-sm mb-0 mr-auto">Bootstrap</h6>
<small class="font-weight-medium text-muted">11 mins ago</small>
<button type="button" class="close ml-2 mb-1" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
// Basic toast example (remove .fade .show to hide toast initially)
.toast.fade.show(role="alert", aria-live="assertive", aria-atomic="true")
.toast-header
.d-inline-block.align-middle.bg-primary.rounded-sm.mr-2(style="width: 1.25rem; height: 1.25rem;")
h6.font-size-sm.mb-0.mr-auto Bootstrap
small.font-weight-medium.text-muted 11 mins ago
button(type="button", data-dismiss="toast", aria-label="Close").close.ml-2.mb-1
span(aria-hidden="true") ×
.toast-body Hello, world! This is a toast message.
Color variations
Primary toast
Hello, world! This is a toast message.
Secondary toast
Hello, world! This is a toast message.
Success toast
Hello, world! This is a toast message.
Danger toast
Hello, world! This is a toast message.
Warning toast
Hello, world! This is a toast message.
Info toast
Hello, world! This is a toast message.
Dark toast
Hello, world! This is a toast message.
Custom color toast
Hello, world! This is a toast message.
<!-- Primary toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-primary text-white">
<i class="fe-bell mr-2"></i>
<span class="font-weight-medium mr-auto">Primary toast</span>
<button type="button" class="close text-white ml-2 mb-1" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body text-primary">Hello, world! This is a toast message.</div>
</div>
<!-- Secondary toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-secondary">
<i class="fe-lock mr-2"></i>
<span class="mr-auto">Secondary toast</span>
<button type="button" class="close ml-2 mb-1" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<!-- Success toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-success text-white">
<i class="fe-check-circle mr-2"></i>
<span class="mr-auto">Success toast</span>
<button type="button" class="close text-white ml-2 mb-1" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body text-success">Hello, world! This is a toast message.</div>
</div>
<!-- Danger toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-danger text-white">
<i class="fe-slash mr-2"></i>
<span class="mr-auto">Danger toast</span>
<button type="button" class="close text-white ml-2 mb-1" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body text-danger">Hello, world! This is a toast message.</div>
</div>
<!-- Warning toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-warning text-white">
<i class="fe-alert-triangle mr-2"></i>
<span class="mr-auto">Warning toast</span>
<button type="button" class="close text-white ml-2 mb-1" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body text-warning">Hello, world! This is a toast message.</div>
</div>
<!-- Info toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-info text-white">
<i class="fe-info mr-2"></i>
<span class="mr-auto">Info toast</span>
<button type="button" class="close text-white ml-2 mb-1" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body text-info">Hello, world! This is a toast message.</div>
</div>
<!-- Dark toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-dark text-white">
<i class="fe-clock mr-2"></i>
<span class="mr-auto">Dark toast</span>
<button type="button" class="close text-white ml-2 mb-1" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body text-dark">Hello, world! This is a toast message.</div>
</div>
<!-- Custom color toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header border-0 text-white" style="background-color: #69459e;">
<i class="fe-map-pin mr-2"></i>
<span class="mr-auto">Custom color toast</span>
<button type="button" class="close text-white ml-2 mb-1" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body" style="color: #69459e;">Hello, world! This is a toast message.</div>
</div>
// Primary toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
.toast-header.bg-primary.text-white
i.fe-bell.mr-2
span.mr-auto Primary toast
button(type="button", data-dismiss="toast", aria-label="Close").close.text-white.ml-2.mb-1
span(aria-hidden="true") ×
.toast-body.text-primary Hello, world! This is a toast message.
// Secondary toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
.toast-header.bg-secondary
i.fe-lock.mr-2
span.mr-auto Accent toast
button(type="button", data-dismiss="toast", aria-label="Close").close.ml-2.mb-1
span(aria-hidden="true") ×
.toast-body Hello, world! This is a toast message.
// Success toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
.toast-header.bg-success.text-white
i.fe-check-circle.mr-2
span.mr-auto Success toast
button(type="button", data-dismiss="toast", aria-label="Close").close.text-white.ml-2.mb-1
span(aria-hidden="true") ×
.toast-body.text-success Hello, world! This is a toast message.
// Danger toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
.toast-header.bg-danger.text-white
i.fe-slash.mr-2
span.mr-auto Danger toast
button(type="button", data-dismiss="toast", aria-label="Close").close.text-white.ml-2.mb-1
span(aria-hidden="true") ×
.toast-body.text-danger Hello, world! This is a toast message.
// Warning toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
.toast-header.bg-warning.text-white
i.fe-alert-triangle.mr-2
span.mr-auto Warning toast
button(type="button", data-dismiss="toast", aria-label="Close").close.text-white.ml-2.mb-1
span(aria-hidden="true") ×
.toast-body.text-warning Hello, world! This is a toast message.
// Info toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
.toast-header.bg-info.text-white
i.fe-info.mr-2
span.mr-auto Info toast
button(type="button", data-dismiss="toast", aria-label="Close").close.text-white.ml-2.mb-1
span(aria-hidden="true") ×
.toast-body.text-info Hello, world! This is a toast message.
// Dark toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
.toast-header.bg-dark.text-white
i.fe-clock.mr-2
span.mr-auto Dark toast
button(type="button", data-dismiss="toast", aria-label="Close").close.text-white.ml-2.mb-1
span(aria-hidden="true") ×
.toast-body.text-dark Hello, world! This is a toast message.
// Custom color toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
.toast-header.border-0.text-white(style="background-color: #69459e;")
i.fe-map-pin.mr-2
span.mr-auto Custom color toast
button(type="button", data-dismiss="toast", aria-label="Close").close.text-white.ml-2.mb-1
span(aria-hidden="true") ×
.toast-body(style="color: #69459e;") Hello, world! This is a toast message.