Bootstrap 5 Toasts getOrCreateInstance() Method

Last Updated : 25 Jul, 2024

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/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <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 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/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <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 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>

Output:

Reference: https://getbootstrap.com/docs/5.2/components/toasts/#methods

vpsop

Improve

Article Tags :

Bootstrap 5 Toasts getOrCreateInstance() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?