Toasts

The toast component works like a brief alert box that appears temporarily when an action occurs, such as clicking a button or submitting a form.

How to Make a Toast Alert

To build a toast, use the .toast class and include .toast-header and .toast-body elements inside it.

Important: Toasts are not visible by default. To display one, add the .show class. To hide it, use a <button> with the data-bs-dismiss="toast" attribute

Output:

Open a Toast

To display a toast when a button is clicked, initialize it using JavaScript by selecting the target element and calling the toast() method

The code below will display all toast messages on the page when a button is clicked.

Output: