Bootstrap Stateful Buttons

Bootstrap Stateful Buttons

In this tutorial you will learn how to create toggle buttons with Bootstrap.
Controlling Button States


In the previous section you've learnt about the Bootstrap button styling and the modifications as well as how to create button groups and toolbars. With Bootstrap you can do even more with the buttons like controlling the states of buttons, make checkbox and radio inputs behaves like toggle buttons, and so on. In the following section we will discuss them in detail.
Creating Single Toggle Button


You can activate toggling (i.e. change the normal state of a button to a push state and vice versa) on a single button by simply adding the data attribute data-toggle="button".

Example

Try this code »<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">Single Toggle Button</button>



— The toggle button upon clicking will look something like this:








Note: The Mozilla Firefox browser persists the button state across page loads, to prevent this behavior, you may simply set the attribute autocomplete="off" on the form containing the buttons, or directly to the input or button element.
Creating Buttons Checkbox


You can add the attribute data-toggle="buttons" to a group of checkboxes for checkbox style toggling on button groups. You can also add the class .active on input's <label> if you want options pre-checked by default. Try out the following example to see how it works:

Example

Try this code »<div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" name="options" autocomplete="off" checked> Option A </label> <label class="btn btn-primary"> <input type="checkbox" name="options" autocomplete="off"> Option B </label> <label class="btn btn-primary active"> <input type="checkbox" name="options" autocomplete="off" checked> Option C </label> </div>



— The output of the above example will look something like this:








Note: The .active class only changes the visual appearance of the buttons radio and checkboxes to make them look like selected. To actually preselect them you need to apply the checked attribute on the input element yourself.
Creating Buttons Radio


Similarly, you can add the attribute data-toggle="buttons" to a group of radio inputs for radio buttons style toggling on button groups, as shown in the following example:

Example

Try this code »<div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" autocomplete="off"> Option A </label> <label class="btn btn-primary active"> <input type="radio" name="options" autocomplete="off" checked> Option B </label> <label class="btn btn-primary"> <input type="radio" name="options" autocomplete="off"> Option C </label> </div>



— The output of the above example will look something like this:



Methods


These are the standard bootstrap's buttons methods:
$().button('toggle')


This method toggles push state of the button. It changes the appearance of the button, and makes it look like that it has been activated. You can also enable auto toggling of a button by simply using the data-toggle attribute. Let's take a look at the following example:

Example

Try this code »<script> $(document).ready(function(){ $("#myButton").click(function(){ $(this).button('toggle'); }); }); </script>