Bootstrap 5 Toasts Events
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center col-8" > < h1 class = "text-success" > w3wiki </ 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 = "https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200x200-min.png" 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 w3wiki </ 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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center col-8" > < h1 class = "text-success" > w3wiki </ 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 = "https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200x200-min.png" 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 w3wiki </ 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
Contact Us