Bootstrap 5 Button Plugin

Last Updated : 26 Feb, 2023

Bootstrap 5 buttons plugin gives the flexibility to play around with setting the toggle states and also with adding certain predefined button methods which help to add utility to the button or even the ability to operate even outside the actual button.

Bootstrap 5 Button plugin used classes for toggling states:

active: This class is added to pre-toggle the button.
disabled: This class when added to the button disabled the button and we can click on it anymore.

Bootstrap 5 Button plugin used methods:

toggle(): Changes the push status. This creates the impression that the button has been pressed.
dispose(): 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(): 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:

// Adding un-toggled button:
<button type="button" class="btn" 
        data-bs-toggle="button">
    <--Code Here-->
</button>

// Adding un-toggled button:
<button type="button" class="btn active" 
        data-bs-toggle="button">
    <--Code Here-->
</button>

// Adding Disabled button:
<button type="button" class="btn" 
        disabled data-bs-toggle="button">
    <--Code Here-->
</button>

// For using Button methods
button-instance.toggle()// or any other method

Example 1: This code example demonstrates how we can create Untoggled, Pre-toggled, and disabled-buttons. We can see how we toggle an Untoggled button and untoggle a Pre-toggled button and we can’t do anything with the disabled-buttons.

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">
</head>
 
<body>
    <h1 class="m-4 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">
        Bootstrap 5 Buttons plugin
    </h4>
    <div class="container d-flex flex-column mb-4 p-4">
        <button type="button"
            class="btn btn-success ms-5 mb-3  w-50"
            data-bs-toggle="button">
            Untoggled button
        </button>
        <button type="button"
            class="btn btn-success active ms-5 mb-3 w-50"
            data-bs-toggle="button" aria-pressed="true">
            Pre-toggled button
        </button>
        <button type="button"
            class="btn btn-success ms-5 mb-3  w-50"
            disabled data-bs-toggle="button">
            Disabled Toggle button
        </button>
    </div>
</body>
 
</html>

Output:

Example 2: This code example demonstrates how we can use the getOrCreateInstance() method and the toggle() and dispose() buttons methods. Here 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 plugin
    </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, 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 getOrCreateInstance 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>