Bootstrap 5 Toasts hide() Method
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 hide() method is used to hide the toast from the display.
Syntax:
toast.hide()
Return Value: This method returns to the caller before the toast has actually been hidden.
Example 1: The example below demonstrates the usage of the Toasts hide() Method using buttons that hides/closes the toast.
HTML
<!DOCTYPE html> < html lang = "en" > < 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 mt-3" > < h1 class = "text-success" > w3wiki </ h1 > < h3 >Bootstrap 5 Toasts hide() 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 > < button type = "button" class = "btn btn-danger" id = "ctoastbtn" >Hide Toast</ button > < div class = "toast" > < 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" > Welcome to w3wiki </ 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 Beginner.</ 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()) } document.getElementById("ctoastbtn") .onclick = function () { var toastElList = [].slice.call( document.querySelectorAll('.toast')) var toastList = toastElList.map(function (toastEl) { return new bootstrap.Toast(toastEl) }) toastList.forEach(toast => toast.hide()) } </ script > </ body > </ html > |
Output:
Example 2: The example below demonstrates the usage of the Bootstrap 5 Toasts hide() Method using buttons and with the stacking of the toasts.
HTML
<!DOCTYPE html> < html lang = "en" > < 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 mt-3" > < h1 class = "text-success" >w3wiki</ h1 > < h3 >Bootstrap 5 Toasts hide() Method</ h3 > < p class = "mt-4" > The button below is used to trigger the toast. </ p > < button type = "button" class = "btn btn-success mb-3" id = "toastbtn-1" >Show Toast 1</ button > < button type = "button" class = "btn btn-danger mb-3" id = "ctoastbtn-1" >Close Toast 1</ button > < br > < button type = "button" class = "btn btn-success" id = "toastbtn-2" >Show Toast 2</ button > < button type = "button" class = "btn btn-danger" id = "ctoastbtn-2" >Close Toast 2</ button > < div class = "toast-container" > < div class = "toast" id = "toast-1" > < 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" > Welcome to w3wiki </ 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 Beginner. </ p > </ div > </ div > < div class = "toast" id = "toast-2" > < 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" > This is w3wiki </ 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()) } document.getElementById("ctoastbtn-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.hide()) } document.getElementById("ctoastbtn-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.hide()) } </ script > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/toasts/#hide
Contact Us