What is Bootstrap 4 toast?

Overview

A toast is similar to an alert box, used to notify users when something happens. It will only display for a few seconds.

Create a toast with Bootstrap 4

We can create a toast with Bootstrap 4 using the toast class.

A toast contains a toast-header and toast-body, which we need to provide inside the toast class.

Syntax

<div>
  <div>
    This is toast header
  </div>
  <div>
    Inside of toast body
  </div>
</div>

Code

Let’s look at the code below:

Explanation

In the above code:

• Lines 7 to 10: We include all the prerequisites needed to run this toast, which are Bootstrap, jQuery, and Popper.
• Line 15: We create a button so that users can click and produce an event.
• Line 18: We create a div element with the class as toast. We use this to display toast.
• Line 19: We create a toast header using the div element and provide content to be displayed in div.
• Line 22: We create a toast body using the div element and display content in div.
• Lines 29 to 32: We enable toast elements according to user-generated action events. For example, when the user clicks the button, we show the toast.