Bootstrap 5 Toasts Events
Last Updated :
15 Dec, 2022
Bootstrap5 Toasts Events are events that take place when the toast triggers a specific instance method. These are used to perform some tasks when these instances are triggered.
Toasts Events:
- show.bs.toast: This event is called when show instance method of toast is called.
- shown.bs.toast: This event is called when toast is shown to the user.
- hide.bs.toast: This event is called when the toast hide instance is evoked.
- hidden.bs.toast: This event is called when toast closing is finished.
Syntax:
var myToastEl = document.getElementById('#id')
myToastEl.addEventListener($EVENT, function () {
...
})
The $EVENT can be replaced by any of the above-mentioned events.
Example 1: In this example, we will learn about shown.bs.toast. It will trigger after the toast is shown.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container text-center col-8" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >
Bootstrap 5 Toasts Events
</ h2 >
< div class = "container text-center" >
< button type = "button"
class = "btn btn-primary"
id = "success"
onClick = "showToast()" >
Show
</ button >
< div class = "toast text-white bg-primary"
id = "GFG" >
< div class = "toast-header" >
< img src =
class = "img-thumbnail rounded me-2"
width = "40px"
alt = "GFG Logo" >
< strong class = "me-auto" >
Toast Events
</ strong >
< button type = "button"
class = "btn-close"
data-bs-dismiss = "toast" >
</ button >
</ div >
< div class = "toast-body" >
< p >
Welcome to GeeksforGeeks
</ p >
</ div >
</ div >
</ div >
</ div >
< script >
function showToast() {
var toastElList =
[].slice.call(document.querySelectorAll('.toast'));
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
var myToastEl = document.getElementById('GFG')
myToastEl.addEventListener('shown.bs.toast', function () {
alert("Shown bs Toast called")
})
}
</ script >
</ body >
</ html >
|
Output:
Example 2: In this example, we will learn about hidden.bs.toast which is triggered when the toast is hidden.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container text-center col-8" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >
Bootstrap 5 Toasts Events
</ h2 >
< div class = "container text-center" >
< button type = "button"
class = "btn btn-primary"
id = "success"
onClick = "showToast()" >
Show
</ button >
< div class = "toast text-white bg-primary"
id = "GFG" >
< div class = "toast-header" >
< img src =
class = "img-thumbnail rounded me-2"
width = "40px"
alt = "GFG Logo" >
< strong class = "me-auto" >
Toast Success
</ strong >
< button type = "button"
class = "btn-close"
data-bs-dismiss = "toast" >
</ button >
</ div >
< div class = "toast-body" >
< p >
Welcome to GeeksforGeeks
</ p >
</ div >
</ div >
</ div >
</ div >
< script >
function showToast() {
var toastElList =
[].slice.call(document.querySelectorAll('.toast'));
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
var myToastEl = document.getElementById('GFG')
myToastEl.addEventListener('hidden.bs.toast', function () {
alert("Hidden bs Toast called")
})
}
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/toasts/#events
Share your thoughts in the comments
Please Login to comment...