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 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-delay='5000')
        .toast-header
            i(data-feather='bell').mr-2
            strong.mr-auto Toast with Autohide
            small.text-muted.ml-2 just now
            button.ml-2.mb-1.close(type='button', data-dismiss='toast', aria-label='Close')
                span(aria-hidden='true') ×
        .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 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-autohide='false')
        .toast-header
            i(data-feather='bell').mr-2
            strong.mr-auto Toast without Autohide
            small.text-muted.ml-2 just now
            button.ml-2.mb-1.close(type='button', data-dismiss='toast', aria-label='Close')
                span(aria-hidden='true') ×
        .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-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:
.toast(role='alert', aria-live='assertive', aria-atomic='true', style='opacity: 1;')
    .toast-header.text-primary
        i(data-feather='alert-circle').mr-2
        strong.mr-auto Primary Text Toast
        small.text-muted.ml-2 just now
        button.ml-2.mb-1.close(type='button', data-dismiss='toast', aria-label='Close')
            span(aria-hidden='true') ×
    .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').mr-2
        strong.mr-auto Secondary Text Toast
        small.text-muted.ml-2 just now
        button.ml-2.mb-1.close(type='button', data-dismiss='toast', aria-label='Close')
            span(aria-hidden='true') ×
    .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').mr-2
        strong.mr-auto Success Text Toast
        small.text-muted.ml-2 just now
        button.ml-2.mb-1.close(type='button', data-dismiss='toast', aria-label='Close')
            span(aria-hidden='true') ×
    .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').mr-2
        strong.mr-auto Info Text Toast
        small.text-muted.ml-2 just now
        button.ml-2.mb-1.close(type='button', data-dismiss='toast', aria-label='Close')
            span(aria-hidden='true') ×
    .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').mr-2
        strong.mr-auto Warning Text Toast
        small.text-muted.ml-2 just now
        button.ml-2.mb-1.close(type='button', data-dismiss='toast', aria-label='Close')
            span(aria-hidden='true') ×
    .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').mr-2
        strong.mr-auto Danger Text Toast
        small.text-muted.ml-2 just now
        button.ml-2.mb-1.close(type='button', data-dismiss='toast', aria-label='Close')
            span(aria-hidden='true') ×
    .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:
.toast(role='alert', aria-live='assertive', aria-atomic='true')
    .toast-header.bg-primary.text-white
        i(data-feather='alert-circle').mr-2.text-white-50
        strong.mr-auto Primary Text Toast
        small.text-white-50.ml-2 just now
        button.ml-2.mb-1.close.text-white(type='button', data-dismiss='toast', aria-label='Close')
            span(aria-hidden='true') ×
    .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').mr-2.text-white-50
        strong.mr-auto Secondary Text Toast
        small.text-white-50.ml-2 just now
        button.ml-2.mb-1.close.text-white(type='button', data-dismiss='toast', aria-label='Close')
            span(aria-hidden='true') ×
    .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').mr-2.text-white-50
        strong.mr-auto Success Text Toast
        small.text-white-50.ml-2 just now
        button.ml-2.mb-1.close.text-white(type='button', data-dismiss='toast', aria-label='Close')
            span(aria-hidden='true') ×
    .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').mr-2.text-white-50
        strong.mr-auto Info Text Toast
        small.text-white-50.ml-2 just now
        button.ml-2.mb-1.close.text-white(type='button', data-dismiss='toast', aria-label='Close')
            span(aria-hidden='true') ×
    .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').mr-2.text-white-50
        strong.mr-auto Warning Text Toast
        small.text-white-50.ml-2 just now
        button.ml-2.mb-1.close.text-white(type='button', data-dismiss='toast', aria-label='Close')
            span(aria-hidden='true') ×
    .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').mr-2.text-white-50
        strong.mr-auto Danger Text Toast
        small.text-white-50.ml-2 just now
        button.ml-2.mb-1.close.text-white(type='button', data-dismiss='toast', aria-label='Close')
            span(aria-hidden='true') ×
    .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!
Bootstrap Documentation Available

Toasts are a default component included with the Bootstrap framework. For more information on implementing, modifying, and extending the usage of toasts within your project, visit the official Bootstrap toasts documentation page.

Visit Bootstrap Toasts Docs