Bootstrap 5 Toasts getOrCreateInstance() Method

Last Updated : 15 Dec, 2022

Bootstrap 5 Toast getOrCreateInstance() Method is used to get the already existing instance or create a new instance and return that to the caller. The returned instance can be used to call other methods for the toast component. This method accepts a DOM element or the selector for an element as the parameter.

Syntax:

bootstrap.Toast.getOrCreateInstance("#element-id");

Return Value: This method returns the Bootstrap 5 Toast instance to the caller.

Example 1: In this example, we used the getOrCreateInstance method to create the toast instance and then called its show method.

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/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 getOrCreateInstance() Method</strong> 
        </div> 
  
        <div> 
            <button type="button" 
                    class="btn btn-success mt-4" 
                    id="toastBtn" 
                    onclick="getOrCreateInstanceANDShowToast()"> 
                getOrCreateInstance And Show Toast 
            </button> 
  
            <div id="gfg" 
                 class="toast mt-4" 
                 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 learning Bootstrap? 
                  </p> 
                    <button type="button" class="btn">Yes</button> 
                    <button type="button" 
                            class="btn" 
                            data-bs-dismiss="toast"> 
                      No 
                  </button> 
                </div> 
            </div> 
        </div> 
    </div> 
  
    <script> 
        function getOrCreateInstanceANDShowToast() { 
            bootstrap.Toast.getOrCreateInstance("#gfg").show(); 
        } 
    </script> 
</body> 
  
</html>

Output:

Bootstrap 5 Toasts getOrCreateInstance() Method

Example 2: In this example, we used the getOrCreateInstance method of the toast component to create the instance of the toast and then toggled it using the show and hide method.

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/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 getOrCreateInstance() Method 
          </strong> 
        </div> 
  
        <div> 
            <button class="btn btn-success mt-4" 
                    id="toastBtn" 
                    onclick="getOrCreateInstance_AND_ShowToast()"> 
                getOrCreateInstance And Show Toast 
            </button> 
  
            <br> 
  
            <button class="btn btn-danger mt-2" 
                    id="toastBtn" 
                    onclick="getOrCreateInstance_AND_HideToast()"> 
                getOrCreateInstance And Hide Toast 
            </button> 
  
            <div id="gfg" class="toast mt-5" role="alert"> 
                <div class="toast-header"> 
                    About GeeksforGeeks. 
                </div> 
                <div class="toast-body"> 
                    <p class="border-bottom"> 
                        GeeksforGeeks is a online computer science 
                        portal for Geeks. It was founded in 2009 
                        by Sandeep Jain, alumni of IIT-Roorkee. 
                    </p> 
                </div> 
            </div> 
        </div> 
    </div> 
  
    <script> 
        function getOrCreateInstance_AND_ShowToast() { 
            let instance = bootstrap.Toast.getOrCreateInstance("#gfg"); 
            instance.show(); 
        } 
          
        function getOrCreateInstance_AND_HideToast() { 
            let instance = bootstrap.Toast.getOrCreateInstance("#gfg"); 
            instance.hide(); 
        } 
    </script> 
</body> 
  
</html>