Bootstrap 5 Toasts are a type of alert box that is used to show a message or an update to the user. For example, submitting a form, clicking a button, or maybe a push notification inside the website. The alert box type of toast is shown for a couple of seconds.
The show() method is used to show the toast when it is triggered.
Syntax:
toast.show()
Return Value: This method returns to the caller before the toast has actually been shown.
Example 1: The example below demonstrates the usage of the Toasts show() Method using buttons.
<!DOCTYPE html> < html lang = "en" >
< head >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Bootstrap 5 Toasts show() Method</ h3 >
< p class = "mt-4" >
The button below is used to trigger the toast.
</ p >
< button type = "button" class = "btn btn-success" id = "toastbtn" >
Show Toast
</ button >
< div class = "toast" >
< div class = "toast-header" >
< img src =
class = "img-thumbnail rounded me-2" width = "40px" alt = "GFG Logo" >
< strong class = "me-auto" >
Welcome to GeeksforGeeks
</ strong >
< button type = "button" class = "btn-close" data-bs-dismiss = "toast" >
</ button >
</ div >
< div class = "toast-body" >
< p >
This is a computer science
portal for geeks.
</ p >
</ div >
</ div >
</ div >
< 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 >
</ body >
</ html >
|
Output:
Example 2: The example below demonstrates the usage of the Bootstrap 5 Toasts show() Method using buttons and with the stacking of the toasts.
<!DOCTYPE html> < html lang = "en" >
< head >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Bootstrap 5 Toasts show() Method</ h3 >
< p class = "mt-4" >
The button below is used to trigger the toast.
</ p >
< button type = "button" class = "btn btn-success" id = "toastbtn-1" >Show Toast 1</ button >
< button type = "button" class = "btn btn-success" id = "toastbtn-2" >Show Toast 2</ button >
< div class = "toast-container" >
< div class = "toast" id = "toast-1" >
< div class = "toast-header" >
< img src =
class = "img-thumbnail rounded me-2" width = "40px" alt = "GFG Logo" >
< strong class = "me-auto" >
Welcome to GeeksforGeeks
</ strong >
< button type = "button" class = "btn-close" data-bs-dismiss = "toast" ></ button >
</ div >
< div class = "toast-body" >
< p >
This is a computer science
portal for geeks.
</ p >
</ div >
</ div >
< div class = "toast" id = "toast-2" >
< div class = "toast-header" >
< img src =
class = "img-thumbnail rounded me-2" width = "40px" alt = "GFG Logo" >
< strong class = "me-auto" >
This is GeeksforGeeks
</ strong >
< button type = "button" class = "btn-close" data-bs-dismiss = "toast" ></ button >
</ div >
< div class = "toast-body" >
< p >
This is a place to get quality
informative articles.
</ p >
</ div >
</ div >
</ div >
</ div >
< script >
document.getElementById("toastbtn-1")
.onclick = function () {
var toastElList = [].slice.call(
document.querySelectorAll('#toast-1'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
document.getElementById("toastbtn-2")
.onclick = function () {
var toastElList = [].slice.call(
document.querySelectorAll('#toast-2'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/toasts/#show