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>

---

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

Credit: www.w3schools.com