HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.)
The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
Some text inside the toast body
To create a toast, use the .toast
class, and add a .toast-header
and a
.toast-body
inside of it.
.show
class
if you want to display it. To close it, use a
<button> element and add data-bs-dismiss="toast"
:
<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>
To show a toast with a click of a button, you must initialize it with JavaScript: select the
specified element and call the toast()
method.
The following code will show all "toasts" in the document when you click on a button:
<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>