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

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

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

❮ Previous Next ❯