Bootstrap 4 Toast

Bootstrap 4 offers a Toast component, which is quite similar to the alert box and pushes notifications. The toast is visible on the screen for a few seconds when any action takes place, such as when a user submits a form. It is a lightweight and easily customizable component. The toast is created with the help of a flexbox that allows you to align and set the position of the Toast as per the choice.

Steps for creating a Toast

  • Add the .toast class to the <div> element to create a toast.
  • Add the .toast-header class to the <div> element to create a toast header.
  • Add the .toast-body class to the <div> element to create a toast body.

Note: It is necessary to initialize the toast with jQuery, for that you need to choose the specific element and call the toast() method.

Example

Output

Bootstrap 4 Toast

When you click on the Click here button the Output is given below:

Bootstrap 4 Toast

Show and Hide a Toast – By default, the toast is hidden. You have to click on the button first to see the toast. You can also create a toast which is visible by default and disappear when you click on the button. For that add the data-autohide=”false” attribute along with the .toast class to the <div> element.

To close the toast which is by default visible, add the data-dismiss=”toast” attribute to the <button> element

Example

Output

Bootstrap 4 Toast

Placement – Bootstrap 4 allows you to set the position of the toast on your own with the help of custom CSS and flexbox property.

Example

Output

Bootstrap 4 Toast

Pin It on Pinterest

Share This