Lesson 26: Toast in Bootstrap 5

Toast is also a fun component, similar to notifications on websites and apps. Here's how to create a toast in Bootstrap 5 .

 

What is toast on the web?

A toast is a component similar to an alert box, but it only appears for a few seconds when something happens. For example, when a user clicks a button, submits a form, etc.

How to create a toast in Bootstrap 5

To create a toast, use the class and .toastadd it inside..toast-header.toast-body

Note: The toast is hidden by default. Use the class .showif you want to show it. To close it, use the element.and add data-bs-dismiss="toast":

 Toast Header  Some text inside the toast body 

For example:

 Bootstrap Example 

Example of toast on TipsMake.com.com

Toast is like a quick notification box, appearing for only a few seconds when a particular task occurs.

This example uses .show to default to always displaying the toast. Close it by clicking the x in the toast header.

 QuanTriMang.com 

The leading technology news channel in Vietnam.

 

Open a toast

To display a quick toast alert with a single button click, you must launch it using JavaScript: select the specified element and call the toast() method .

The following code will display all toasts in the document when you click a button:

For example:

 Bootstrap Example 

Examples of toast

This example uses a button to display the toast.

 Hiện Toast TipsMake.com 

Welcome to QuanTriMang.com

Above are the things you need to know about creating toasts in Bootstrap 5. It's quite similar to a tooltip or notification box, but it only displays for a few seconds. Hopefully, this Bootstrap tutorial is helpful to you.