Toasts in Bootstrap 5

Bootstrap Toasts

Bootstrap Toasts are used to display simple notifications or messages to users.

They are positioned at the bottom right corner of the screen by default, but can be positioned at other locations as well.

As an example:

In this example:

We created a toast element inside a container with the class position-fixed bottom-0 end-0 p-3 to position it at the bottom right corner of the screen.
The toast element contains a toast-header and a toast-body.
The toast-header contains a title and a close button, while the toast-body contains the message that we want to display.
We then used JavaScript to create a new bootstrap.Toast object and passed in the toast element as the first argument.
We also called the show() method on the object to display the toast message.

To open a Bootstrap Toast, you can create a new bootstrap.Toast() object in JavaScript and call its show() method.

As an example:

In this example:,

We have created the toast message using bootstrap toast.
Toast class to initialize and show the toast.
The button tag with the id attribute set to myButton creates a clickable button that can be selected in JavaScript using the querySelector() method.
The div tag with the class toast creates a container for a Bootstrap toast notification, which is a small pop-up message that appears on the screen.
The script tag contains JavaScript code that selects the button and the toast container using querySelector(), and then attaches an event listener to the button using addEventListener().
When the button is clicked, the code creates a new Toast object from the Bootstrap JavaScript library and passes it the toast container as an argument.
The show() method is then called on the Toast object to display the notification.