Bootstrap 5 Toasts getInstance() Method Last Updated : 22 Jul, 2024 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 Toast getInstance() method is used to get the already existing instance of the bootstrap Toast and return it to the caller. This method does not create a new instance if it does not exists. The caller can use the instance of the toast to perform other tasks or to call other methods of the toast component.Syntax:bootstrap.Toast.getInstance("#element-id");Parameters: This method accepts an HTML element or the selector of an element as its parameterReturn Value: This method returns the Bootstrap 5 Toast instance to the caller.Example 1: In this example, we used the getInstance() method of the toast to get the toast instance and then it calls show() method to make it visible. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Bootstrap 5</title> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div class="mt-4"> <h1 class="text-success">GeeksforGeeks</h1> <strong>Bootstrap 5 Toasts getInstance() Method</strong> </div> <div> <button type="button" class="btn btn-success mt-4" id="toastBtn" onclick="getInstanceANDShowToast()"> getInstance And Show Toast </button> <div id="gfg" class="toast mt-5" role="alert"> <div class="toast-header"> Demo Survey Question. </div> <div class="toast-body"> <p class="border-bottom mb-3 pb-2"> Are you a student?</p> <button type="button" class="btn btn-success btn-sm" data-bs-dismiss="toast"> Yes </button> <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="toast"> No </button> </div> </div> </div> </div> <script> new bootstrap.Toast(document.querySelector("#gfg")); function getInstanceANDShowToast() { bootstrap.Toast.getInstance("#gfg").show(); } </script> </body> </html> Output: Example 2: In this example, we used the getInstance() method of the toast to get the toast instance and then call its dispose() method to remove the toast, so that it will not show anymore. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Bootstrap 5</title> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div class="mt-4"> <h1 class="text-success">GeeksforGeeks</h1> <strong> Bootstrap 5 Toasts getInstance() Method </strong> </div> <div> <button type="button" class="btn btn-success mt-4" onclick="getInstanceANDShowToast()"> getInstance And Show Toast </button> <button type="button" class="btn btn-danger mt-4" onclick="getInstanceANDDisposeToast()"> getInstance And Dispose Toast </button> <div id="gfg" class="toast mt-5" role="alert"> <div class="toast-header"> Demo Survey Question. </div> <div class="toast-body"> <p class="border-bottom mb-3 pb-2"> Are you interested in Interview Preparation? </p> <button type="button" class="btn btn-success btn-sm" data-bs-dismiss="toast"> Yes </button> <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="toast"> No </button> </div> </div> </div> </div> <script> new bootstrap.Toast(document.querySelector("#gfg")); function getInstanceANDShowToast() { bootstrap.Toast.getInstance("#gfg").show(); } function getInstanceANDDisposeToast() { bootstrap.Toast.getInstance("#gfg").dispose(); } </script> </body> </html> Output: Reference: https://getbootstrap.com/docs/5.0/components/toasts/#getinstance Comment More infoAdvertise with us V vpsop Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads Bootstrap 5 Toasts Bootstrap 5 Toasts are notifications or messages which the users receive whenever they perform certain actions. They can easily be customized. Overview: Toasts need to be initialized. Apply autohide: false so that the toasts don't automatically hide.Placement: You can place toasts as you want. The t 3 min read Bootstrap 5 Toasts Basic Bootstrap 5 Toasts Basic feature showcases brief alert notifications, resembling mobile and desktop push notifications. It elaborates on fundamental toast functionality, providing a user-friendly way to display important information to users.Bootstrap 5 Toasts Basic Class: No special classes are use 2 min read Bootstrap 5 Toasts Live Bootstrap 5 Toasts Live is used to show the alert notifications. Toasts are brief alerts designed to resemble the push notifications made popular by mobile and desktop operating systems. The Toasts Live feature is used to show a toast in the lower corners of the web page.Toasts Live Classes: No spec 2 min read Bootstrap 5 Toasts Translucent Bootstrap 5 provides the Toasts which are used to show the alert notifications. Toasts are brief alerts designed to resemble the push notifications made popular by mobile and desktop operating systems. The Toast translucent feature is used to be slightly translucent to blend in with the content belo 2 min read Bootstrap 5 Toasts Stacking Bootstrap 5 Toasts Stacking feature is used to wrap multiple toasts in a toast container which will increase the vertical spacing. Toasts Stacking Classes: No special classes are used in Toasts Stacking, you just need to have knowledge of Bootstrap 5 Toasts. Syntax: <div class="toast-container" 2 min read Bootstrap 5 Toasts Custom content Bootstrap 5 Toasts Custom content is used to add your own markup by removing sub-components. Users can easily Customize toasts by adding their own content or by adding other bootstrap components inside toast. There are no predefined classes for toast custom content. You can custom-create them by giv 2 min read Bootstrap 5 Toasts Color Schemes Toasts are a type of alert box that is used to show a message or an update to the user. You can use bootstrap 5 color and background utilities to create different color schemes and customize your toasts. Bootstrap 5 Toasts Color Schemes Classes: We can use the Bootstrap 5 Color classes to color the 2 min read Bootstrap 5 Toasts Placement Bootstrap 5 Toasts which are used to show the alert notifications. Toasts are brief alerts designed to resemble the push notifications made popular by mobile and desktop operating systems. The Toast Placement feature is used to set the position of the toast on the web page. Bootstrap 5 Toasts Placem 4 min read Bootstrap 5 Toasts Accessibility Toasts are the basic push notifications sent to the user its similar to the alert box. To create a basic toast we have to use the class name "toast" inside the toast class we can also add the class "toast-header" and add the header for the toast body, the "toast-body" class can be used. We can also 2 min read Bootstrap 5 Toasts SASS Bootstrap 5 Toasts SASS has a set of variables with default values that can be changed to customize the toasts. Default values of SASS variables of Toasts: $toast-max-width: 350px; $toast-padding-x: 0.75rem; $toast-padding-y: 0.5rem; $toast-font-size: 0.875rem; $toast-color: null; $toast-background- 3 min read Like