Bootstrap 5 Tutorial
BS5 Toasts
Bootstrap 5 Toasts
The toast component is basically an alert box that is only visible for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
==== button mukavu ====
How To Create a Toast
Use the .toast class and include a .toast-header and .toast-body to construct a toast.
Note: By default, toasts are hidden. If you wish to display it, use the .show class. Use a <button> element and add data-bs-dismiss=”toast” to close it:
<div class="toast show">
<div class="toast-header">
Toast Header
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Open a Toast
You must initialize it with JavaScript in order for a button click to display a toast: Call the toast() function after selecting the designated element.
When you click a button, the following code will display all of the “toasts” in the document:
Example
<script>
document.getElementById("toastbtn").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
</script>
