Bootstrap 5 Buttons Toggle states

Last Updated : 31 Jul, 2024

Bootstrap 5 Buttons Toggle states are used to change the button states. A button has three toggle states, they are passive, active, and disabled. We can add the button to the data-bs-toggle attribute to the button to toggle a button’s active state. For the passive state, we can just use the syntax by default, for the active one we can add the active class and disabled attribute for the disabled button.

Bootstrap 5 Buttons Toggle states classes: There is no class to make it toggleable, for that, we have an attribute called data-bs-toggle.

Bootstrap 5 Buttons Toggle states Attribute: Add data-bs-toggle="button" to toggle a button’s active state. You must manually add the .active class if you're pre-toggling a button.

data-bs-toggle: Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class

Syntax:

//For Passive button:
<button type="button" class="btn btn-primary" 
        data-bs-toggle="button">
    <--Code Here-->
</button>

//For Pre-toggled button:
<button type="button" class="btn btn-primary active" 
        data-bs-toggle="button">
    <--Code Here-->
</button>

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

Example 1: The code below 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/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <title>Button toggle states</title>
</head>

<body>
    <h1 class="m-4 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">Bootstrap 5 Buttons 
        Toggle states
    </h4>
    <div class="container mb-4 p-4">
        <button type="button" class="btn btn-success" 
            data-bs-toggle="button">
            Untoggled button
         </button>
        <button type="button" 
                class="btn btn-success active" 
                data-bs-toggle="button" 
                aria-pressed="true">
                Pre-toggled button
            </button>
        <button type="button" 
                class="btn btn-success" 
                disabled data-bs-toggle="button">
                Disabled Toggle button
        </button>
    </div>
</body>
  
</html>

Output:

Example 2: The code below demonstrates how we can turn anchor tags Untoggled, Pre-toggled and disabled buttons by adding the role attribute and add the value button to it. Then they act just like buttons after that.

HTML

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

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>

<body>
    <h1 class="m-4 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">Bootstrap 5 Buttons
         Toggle states
    </h4>
    <div class="container mb-4 p-4">
        <a href="https://www.geeksforgeeks.org/"
           class="btn btn-success" role="button" 
           data-bs-toggle="button">
           Untoggled link
        </a>
        <a href="https://www.geeksforgeeks.org/" 
           class="btn btn-success active" 
           role="button" data-bs-toggle="button"
           aria-pressed="true">Pre-toggled link
        </a>
        <a href="https://www.geeksforgeeks.org/" 
           class="btn btn-success disabled" 
           aria-disabled="true" role="button"
           data-bs-toggle="button">
           Disabled toggle link
        </a>
    </div>
</body>
  
</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/buttons/#toggle-states

Bootstrap 5 Checks and radios Checkbox Toggle buttons

triashabiswas

Improve

Article Tags :

Bootstrap 5 Buttons Toggle states

Similar Reads

Forms

Form controls

Form Select

Form Checks and radios

Form Range

Form Input group

Form Floating labels

Form Validation

Thank You!

What kind of Experience do you want to share?