Bootstrap 5 Toasts getInstance() Method

Last Updated : 24 Jan, 2023

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 parameter

Return 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/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/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/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/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>