Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 JS Toast

Toast CSS Classes

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile & desktop OS.

Class Description
.toast Creates the toast
.toast-header Creates the toast header
.toast-body Creates the toast body

For a tutorial about toasts, visit our Bootstrap 4 Toasts Tutorial.


Initialize Via JavaScript

Toasts must be initialized with jQuery: select the specified element and call the toast() method:

Run code

Toast Options

Options can be passed via data attributes or JavaScript.

For data attributes, append the option name to data-, as in data-autohide="".

Name Type Default Description Example
animation boolean true Apply a CSS fade transition to the toast
autohide boolean true Auto hide the toast Demo
delay number 500 Delay hiding the toast (ms) Demo

Toast Methods

The following table lists all available toast methods:

Method Description
$().toast(options) Activates the toast with an option. See options above for valid values
$().toast("show") Shows the toast
$().toast("hide") Hides the toast
$().toast("dispose") Hides and destroys the toast

Toast Events

The following table lists all available toast events:

Event Description Example
show.bs.toast This event fires immediately when the show instance method is called Demo
shown.bs.toast This event is fired when the toast has been made visible to the user Demo
hide.bs.toast This event is fired immediately when the hide instance method has been called Demo
hidden.bs.toast This event is fired when the toast has finished being hidden from the user Demo