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.
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
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.