Toasts
Subtle push notifications to help deliver alerts to your users
Bootstrap Toasts Demo
Basic Toast with Auto Hide:
The toast alert will appear in the bottom right of this element when the above button is clicked.
Toast with Autohide
just now
This is an example toast alert, it will dismiss automatically, or you can dismiss it manually.
PUG
<!-- Toast button trigger -->
<button class="btn btn-primary mb-3" id="toastBasicTrigger">Toast Demo</button>
<!-- Toast container -->
<div style="position: absolute; bottom: 1rem; right: 1rem;">
<!-- Toast -->
<div class="toast" id="toastBasic" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000">
<div class="toast-header">
<i data-feather="bell"></i>
<strong class="mr-auto">Toast with Autohide</strong>
<small class="text-muted ml-2">just now</small>
<button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">This is an example toast alert, it will dismiss automatically, or you can dismiss it manually.</div>
</div>
</div>//- Toast button trigger
button.btn.btn-primary.mb-3#toastBasicTrigger Toast Demo
//- Toast container
div(style='position: absolute; bottom: 1rem; right: 1rem;')
//- Toast
.toast#toastBasic(role='alert', aria-live='assertive', aria-atomic='true', data-bs-delay='3000')
.toast-header
i(data-feather='bell').me-2
strong.me-auto Toast with Autohide
small.text-muted.ms-2 just now
button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
.toast-body
| This is an example toast alert, it will dismiss automatically, or you can dismiss it manually.$("#toastBasicTrigger").on("click", function(e) {
e.preventDefault();
$("#toastBasic").toast("show");
});
Toasts are positioned using
position: absolute
, meaning they will position themselves relative to their nearest parent element using
position: relative
.
The absolute positioned container element (rather than using absolute position on the toast itself) is used so the toasts will automatically stack if multiple toasts are used. For more information on how to use and position toasts, visit the offical Bootstrap docs.
Note: Toasts require JavaScript for initialization!
Basic Toast with Manual Dismissal:
The toast alert will appear in the bottom right of this element when the above button is clicked.
Toast without Autohide
just now
This is an example toast alert, you must close this toast alert manually.
<!-- Toast button trigger -->
<button class="btn btn-primary mb-3" id="toastNoAutohideTrigger">Toast Demo</button>
<!-- Toast container -->
<div style="position: absolute; bottom: 1rem; right: 1rem;">
<!-- Toast -->
<div class="toast" id="toastNoAutohide" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
<div class="toast-header">
<i data-feather="bell"></i>
<strong class="mr-auto">Toast without Autohide</strong>
<small class="text-muted ml-2">just now</small>
<button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">This is an example toast alert, you must close this toast alert manually.</div>
</div>
</div>//- Toast button trigger
button.btn.btn-primary.mb-3#toastNoAutohideTrigger Toast Demo
//- Toast container
div(style='position: absolute; bottom: 1rem; right: 1rem;')
//- Toast
.toast#toastNoAutohide(role='alert', aria-live='assertive', aria-atomic='true', data-bs-autohide='false')
.toast-header
i(data-feather='bell').me-2
strong.me-auto Toast without Autohide
small.text-muted.ms-2 just now
button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
.toast-body
| This is an example toast alert, you must close this toast alert manually.$("#toastNoAutohideTrigger").on("click", function(e) {
e.preventDefault();
$("#toastNoAutohide").toast("show");
});
The above example uses the
data-bs-autohide='false'
data attribute, which disables the auto hiding feature. You must manually dismiss this demo toast by clicking the x button on the toast.
Note: Toasts require JavaScript for initialization!
Toast Colors
Text Color Modification:
Primary Text Toast
just now
This toast uses the primary text utility on the toast header.
Secondary Text Toast
just now
This toast uses the secondary text utility on the toast header.
Success Text Toast
just now
This toast uses the success text utility on the toast header.
Info Text Toast
just now
This toast uses the info text utility on the toast header.
Warning Text Toast
just now
This toast uses the warning text utility on the toast header.
Danger Text Toast
just now
This toast uses the danger text utility on the toast header.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1;">
<div class="toast-header text-primary">
<i data-feather="bell"></i>
<strong class="mr-auto">Primary Text Toast</strong>
<small class="text-muted ml-2">just now</small>
<button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">This toast uses the primary text utility on the toast header.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1;">
<div class="toast-header text-secondary">
<i data-feather="bell"></i>
<strong class="mr-auto">Secondary Text Toast</strong>
<small class="text-muted ml-2">just now</small>
<button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">This toast uses the secondary text utility on the toast header.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1;">
<div class="toast-header text-success">
<i data-feather="bell"></i>
<strong class="mr-auto">Success Text Toast</strong>
<small class="text-muted ml-2">just now</small>
<button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">This toast uses the success text utility on the toast header.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1;">
<div class="toast-header text-info">
<i data-feather="bell"></i>
<strong class="mr-auto">Info Text Toast</strong>
<small class="text-muted ml-2">just now</small>
<button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">This toast uses the info text utility on the toast header.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1;">
<div class="toast-header text-warning">
<i data-feather="bell"></i>
<strong class="mr-auto">Warning Text Toast</strong>
<small class="text-muted ml-2">just now</small>
<button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">This toast uses the warning text utility on the toast header.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1;">
<div class="toast-header text-danger">
<i data-feather="bell"></i>
<strong class="mr-auto">Danger Text Toast</strong>
<small class="text-muted ml-2">just now</small>
<button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">This toast uses the danger text utility on the toast header.</div>
</div>.toast(role='alert', aria-live='assertive', aria-atomic='true', style='opacity: 1;')
.toast-header.text-primary
i(data-feather='alert-circle').me-2
strong.me-auto Primary Text Toast
small.text-muted.ms-2 just now
button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
.toast-body
| This toast uses the primary text utility on the toast header.
.toast(role='alert', aria-live='assertive', aria-atomic='true', style='opacity: 1;')
.toast-header.text-secondary
i(data-feather='alert-circle').me-2
strong.me-auto Secondary Text Toast
small.text-muted.ms-2 just now
button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
.toast-body
| This toast uses the secondary text utility on the toast header.
.toast(role='alert', aria-live='assertive', aria-atomic='true', style='opacity: 1;')
.toast-header.text-success
i(data-feather='check-circle').me-2
strong.me-auto Success Text Toast
small.text-muted.ms-2 just now
button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
.toast-body
| This toast uses the success text utility on the toast header.
.toast(role='alert', aria-live='assertive', aria-atomic='true', style='opacity: 1;')
.toast-header.text-info
i(data-feather='info').me-2
strong.me-auto Info Text Toast
small.text-muted.ms-2 just now
button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
.toast-body
| This toast uses the info text utility on the toast header.
.toast(role='alert', aria-live='assertive', aria-atomic='true', style='opacity: 1;')
.toast-header.text-warning
i(data-feather='alert-triangle').me-2
strong.me-auto Warning Text Toast
small.text-muted.ms-2 just now
button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
.toast-body
| This toast uses the warning text utility on the toast header.
.toast(role='alert', aria-live='assertive', aria-atomic='true', style='opacity: 1;')
.toast-header.text-danger
i(data-feather='alert-octagon').me-2
strong.me-auto Danger Text Toast
small.text-muted.ms-2 just now
button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
.toast-body
| This toast uses the danger text utility on the toast header.The above examples use a different text color utility class on the toast header to add another level of context and emphasis to toast notifications. You can use any of the text color utilities available with Bootstrap or with the SB Admin Pro theme!
Background Color Modification:
Primary Text Toast
just now
This toast uses the primary background color utility on the toast header.
Secondary Text Toast
just now
This toast uses the secondary background color utility on the toast header.
Success Text Toast
just now
This toast uses the success background color utility on the toast header.
Info Text Toast
just now
This toast uses the info background color utility on the toast header.
Warning Text Toast
just now
This toast uses the warning background color utility on the toast header.
Danger Text Toast
just now
This toast uses the danger background color utility on the toast header.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-primary text-white">
<i data-feather="alert-circle"></i>
<strong class="mr-auto">Primary Text Toast</strong>
<small class="text-white-50 ml-2">just now</small>
<button class="ml-2 mb-1 btn-close btn-close-white" type="button" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">This toast uses the primary background color utility on the toast header.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-secondary text-white">
<i data-feather="alert-circle"></i>
<strong class="mr-auto">Secondary Text Toast</strong>
<small class="text-white-50 ml-2">just now</small>
<button class="ml-2 mb-1 btn-close btn-close-white" type="button" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">This toast uses the secondary background color utility on the toast header.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-success text-white">
<i data-feather="alert-circle"></i>
<strong class="mr-auto">Success Text Toast</strong>
<small class="text-white-50 ml-2">just now</small>
<button class="ml-2 mb-1 btn-close btn-close-white" type="button" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">This toast uses the success background color utility on the toast header.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-info text-white">
<i data-feather="alert-circle"></i>
<strong class="mr-auto">Info Text Toast</strong>
<small class="text-white-50 ml-2">just now</small>
<button class="ml-2 mb-1 btn-close btn-close-white" type="button" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">This toast uses the info background color utility on the toast header.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-warning text-white">
<i data-feather="alert-circle"></i>
<strong class="mr-auto">Warning Text Toast</strong>
<small class="text-white-50 ml-2">just now</small>
<button class="ml-2 mb-1 btn-close btn-close-white" type="button" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">This toast uses the warning background color utility on the toast header.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-danger text-white">
<i data-feather="alert-circle"></i>
<strong class="mr-auto">Danger Text Toast</strong>
<small class="text-white-50 ml-2">just now</small>
<button class="ml-2 mb-1 btn-close btn-close-white" type="button" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">This toast uses the danger background color utility on the toast header.</div>
</div>.toast(role='alert', aria-live='assertive', aria-atomic='true')
.toast-header.bg-primary.text-white
i(data-feather='alert-circle').me-2.text-white-50
strong.me-auto Primary Text Toast
small.text-white-50.ms-2 just now
button.ms-2.mb-1.btn-close.btn-close-white(type='button', data-bs-dismiss='toast', aria-label='Close')
.toast-body
| This toast uses the primary background color utility on the toast header.
.toast(role='alert', aria-live='assertive', aria-atomic='true')
.toast-header.bg-secondary.text-white
i(data-feather='alert-circle').me-2.text-white-50
strong.me-auto Secondary Text Toast
small.text-white-50.ms-2 just now
button.ms-2.mb-1.btn-close.btn-close-white(type='button', data-bs-dismiss='toast', aria-label='Close')
.toast-body
| This toast uses the secondary background color utility on the toast header.
.toast(role='alert', aria-live='assertive', aria-atomic='true')
.toast-header.bg-success.text-white
i(data-feather='check-circle').me-2.text-white-50
strong.me-auto Success Text Toast
small.text-white-50.ms-2 just now
button.ms-2.mb-1.btn-close.btn-close-white(type='button', data-bs-dismiss='toast', aria-label='Close')
.toast-body
| This toast uses the success background color utility on the toast header.
.toast(role='alert', aria-live='assertive', aria-atomic='true')
.toast-header.bg-info.text-white
i(data-feather='info').me-2.text-white-50
strong.me-auto Info Text Toast
small.text-white-50.ms-2 just now
button.ms-2.mb-1.btn-close.btn-close-white(type='button', data-bs-dismiss='toast', aria-label='Close')
.toast-body
| This toast uses the info background color utility on the toast header.
.toast(role='alert', aria-live='assertive', aria-atomic='true')
.toast-header.bg-warning.text-white
i(data-feather='alert-triangle').me-2.text-white-50
strong.me-auto Warning Text Toast
small.text-white-50.ms-2 just now
button.ms-2.mb-1.btn-close.btn-close-white(type='button', data-bs-dismiss='toast', aria-label='Close')
.toast-body
| This toast uses the warning background color utility on the toast header.
.toast(role='alert', aria-live='assertive', aria-atomic='true')
.toast-header.bg-danger.text-white
i(data-feather='alert-octagon').me-2.text-white-50
strong.me-auto Danger Text Toast
small.text-white-50.ms-2 just now
button.ms-2.mb-1.btn-close.btn-close-white(type='button', data-bs-dismiss='toast', aria-label='Close')
.toast-body
| This toast uses the danger background color utility on the toast header.The above examples use a combination of background color utilities and text color utilities on the toast header to add another level of context and emphasis to toast notifications. You can use any combination of the background color or text color utilities available with Bootstrap or with the SB Admin Pro theme!