Tutorials References Menu

Bootstrap JS Toasts


Toast CSS Classes

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.).

For a tutorial about Toasts, read our Bootstrap Toast Tutorial.

Class Description Example
.toast Creates the toast Try it
.toast-header Creates the toast header Try it
.toast-body Creates the toast body Try it

Activate Via JavaScript

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

Example

<script>
$(document).ready(function(){
  $('.toast').toast('show');
});
</script>
Try it Yourself »

Toast Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Name Type Default Description Try it
animation boolean true

Specifies whether to add a CSS fade transition effect when showing and hiding the toast.

  • true - Add a fading effect
  • false - Do not add a fading effect
Try it
autohide boolean true Specifies whether to hide the toast by default Try it
delay number 500 Specifies the number of milliseconds it will take to hide the toast once it is shown. Try it

Toast Methods

The following table lists all available toast methods.

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

Toast Events

The following table lists all available toast events.

Event Description Try it
show.bs.toast Occurs when the toast is about to be shown Try it
shown.bs.toast Occurs when the toast is fully shown (after CSS transitions have completed) Try it
hide.bs.toast Occurs when the toast is about to be hidden Try it
hidden.bs.toast Occurs when the toast is fully hidden (after CSS transitions have completed) Try it