Bootstrap 4 Toast

The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).

Some text inside the toast body

How To Create a Toast

To create a toast, use the .toast class, and add a .toast-header and a .toast-body inside of it:

<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>

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

The following code will show all "toasts" in the document:

Example

Try it Yourself »

Show and Hide a Toast

Toasts are hidden by default. Use the data-autohide="false" attribute to show it by default. To close it, use a <button> element and add data-dismiss="toast":

Example

<div class="toast" data-autohide="false">
<div class="toast-header">
    <strong class="mr-auto text-primary">Toast Header</strong>
    <small class="text-muted">5 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
    Some text inside the toast body
</div>
</div>

Try it Yourself »

Notice the mr-auto, ml-2 and mb-1 classes? They are used to add specific margins. You will learn more about them in the Bootstrap 4 Utilities Chapter.

Complete Bootstrap Toast Reference

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

❮ Previous Next ❯