Bootstrap 5 Button Methods

Last Updated : 28 Feb, 2023

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/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
            rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>