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 Toast

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

Toasts are built with flexbox, so they’re easy to align and position.

The toast is only shown for a couple of seconds when something happens (i.e. click on a button, form submission, etc.).

Notification 4 seconds age

Hello, world! This is a toast message. You just clicked a button.


How to Create a Toast

Use the .toast class to create a toast.

The .toast-header class provides header to the toasts and .toast-body class provides body to the toasts.

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

The following code will display toast when a button is clicked:

Run code

Show and Hide a Toast

By default, toasts will automatically hide if you do not specify data-autohide="false" attribute.

When using data-autohide="false", you must add a close button to allow users to dismiss the toast.

Run code

Toast Placement

You can place toasts with custom CSS as you need them. The top/bottom right is often used for notifications.

If you're only ever going to show one toast at a time, put the positioning styles on the .toast class.

Toast Header 11 mins ago

Hello, world! This is a toast message.

Click the "x" icon to hide the toast message.

Toast Header 11 mins ago

Hello, world! This is a toast message.

Click the "x" icon to hide the toast message.

Run code

If you need to generate more than one toast, consider using a wrapping element so they can easily stack.

First Toast 11 mins ago

Hello, world! This is a toast message.

Click the "x" icon to hide the toast message.

Second Toast 11 mins ago

Hello, world! This is a toast message.

Click the "x" icon to hide the toast message.

Third Toast 11 mins ago

Hello, world! This is a toast message.

Click the "x" icon to hide the toast message.

Run code

Toast Duration

By default, toasts will automatically hide after 500 milliseconds.

Use the data-delay attribute to delay hiding the toast (to ensure people have enough time to read the toast).

Run code

Complete Bootstrap 4 Toast Reference

For a complete reference of all toast options, methods and events, visit our Bootstrap 4 JS Toast Reference.