Bootstrap 5 Button Methods

Last Updated : 01 Aug, 2024

Bootstrap 5 has specially designed buttons that can be used in different utilities and the buttons can be used. To customize the usage of a user predefined methods can be used with JavaScript. The Button Methods with their function are given below:

Bootstrap 5 Buttons Methods:

toggle(): It changes the push status. This creates the impression that the button has been pressed.
dispose(): It destroys a button on an element. (Deletes the DOM element's stored data)
getInstance(): You may access the button instance linked to a DOM element using a static method.
getOrCreateInstance(): It is a static function that creates a new button instance if the one connected with the DOM element wasn't initialized or returns the related button instance.

Syntax:

button-instance.toggle();

Example 1: The code example demonstrates how we can use the getInstance() method and the toggle() buttons method. The instance is created and then fetched using the getInstance() method and it can be seen in the browser dev tools, and then the button is toggled using the toggle method.

HTML

<!doctype html>
<html lang="en">

<head>
    <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.bundle.min.js">
    </script>
</head>

<body class="m-3">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">
        Bootstrap 5 Buttons Methods
    </h4>
    <div class="container mt-2 p-2">
        <button type="button" 
                class="btn btn-secondary" 
                id="demoButton" 
                data-bs-toggle="button" 
                autocomplete="off">
            Demo button
        </button>
    </div>
    <div class="container mt-2 p-2">
        <button type="button" 
                class="btn btn-primary ms-3" 
                id="inst-btn" 
                data-bs-toggle="button" 
                autocomplete="off">
            Get the instance of the demo button
        </button>
        <button type="button" 
                class="btn btn-success ms-3" 
                id="toggle-btn" 
                data-bs-toggle="button" 
                autocomplete="off">
            toggle the demo button
        </button>
    </div>

    <script>
        var button = 
            document.getElementById("demoButton")
        var startButton = 
            new bootstrap.Button("button")
        
        var btn_1 = document.getElementById("inst-btn");
        btn_1.addEventListener("click", function(){
          
          // Using the getInstance method to
          // catch the preinitialized instance
          const buttonInstance = 
                bootstrap.Button.getInstance(button);
          console.log(buttonInstance)
        });

        var btn_2 = document.getElementById("toggle-btn");

        btn_2.addEventListener("click", function(){
            const buttonInstance = 
                bootstrap.Button.getInstance(button);
          
            // Using the toggle button with the
            // toggle function
            buttonInstance.toggle();
        });
    </script>
</body>

</html>

Output:

Example 2: The code example demonstrates how we can use the getOrCreateInstance() method, toggle(), and dispose() buttons methods. The instance is created using the getOrCreateInstance() method and then the button is toggled and disposed of using the toggle and dispose methods. Disposing of the second demo button is shown in the browser dev tools.

HTML

<!doctype html>
<html lang="en">
<head>
    <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.bundle.min.js">
    </script>
</head>
<body>
    <h1 class="m-4 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">
        Bootstrap 5 Buttons Methods
    </h4>
    <div class="container mt-4 p-4">
        <button type="button" 
                class="btn btn-primary ms-5" 
                id="demoButton_1" 
                data-bs-toggle="button" 
                autocomplete="off">
            First Demo button
        </button>
        <button type="button" 
                class="btn btn-warning ms-5" 
                id="demoButton_2" 
                data-bs-toggle="button" 
                autocomplete="off">
                Second Demo button
        </button>
    </div>
    <div class="container mt-2 p-4">
        <button type="button" 
                class="btn btn-success" 
                id="toggle-btn" 
                data-bs-toggle="button" 
                autocomplete="off">
            Get the instance of the button with 
            primary color and toggle it
        </button>
    </div>
    <div class="container mt-2 p-4">
        <button type="button" 
                class="btn btn-danger" 
                id="dispose-btn" 
                data-bs-toggle="button" 
                autocomplete="off">
                Get the instance of the button with
                  warning color and dispose it
        </button>
    </div>
  
    <script>
        var button_1 = 
            document.getElementById("demoButton_1")
        var button_2 = 
            document.getElementById("demoButton_2")
      
        var btn_1 = document.getElementById("toggle-btn");
        btn_1.addEventListener("click", function(){

            // Using the getInstance method to catch 
            // the preinitialized instance
            const buttonInstance_1 =
                bootstrap.Button.getOrCreateInstance(button_1);
          
            // Using the toggle function with the instance 
            // created in the line above
            buttonInstance_1.toggle();
        });
      
        var btn_2 = 
            document.getElementById("dispose-btn");
        btn_2.addEventListener("click", function(){
          
            // Using the getInstance method to catch 
            // the preinitialized instance
            const buttonInstance_2 = 
                  bootstrap.Button.getOrCreateInstance(button_2);
            console.log(buttonInstance_2);
          
            // Using the dispose function with the instance
            // created in the line above
            buttonInstance_2.dispose();
            console.log(buttonInstance_2);
        });
    </script>
</body>
  
</html>