Options Admin - Responsive Web Application Kit

Bootstrap - Button Groups

We have styled all Bootstrap elements just as you want!

Toggle Code!

Basic Example

Group a series of buttons together on a single line with the button group.

<div class="btn-group" role="group">    <button type="button" class="btn btn-default">Left</button>    <button type="button" class="btn btn-default">Middle</button>    <button type="button" class="btn btn-default">Right</button></div><!-- /.btn-group -->

Button Toolbar

Combine sets of <div class="btn-group">into a <div class="btn-toolbar">for more complex components.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">    <div class="btn-group" role="group" aria-label="First group">        <button type="button" class="btn btn-default">1</button>        <button type="button" class="btn btn-default">2</button>        <button type="button" class="btn btn-default">3</button>        <button type="button" class="btn btn-default">4</button>    </div>    <div class="btn-group" role="group" aria-label="Second group">        <button type="button" class="btn btn-default">5</button>        <button type="button" class="btn btn-default">6</button>        <button type="button" class="btn btn-default">7</button>    </div>    <div class="btn-group" role="group" aria-label="Third group">        <button type="button" class="btn btn-default">8</button>    </div></div><!-- /.btn-toolbar -->

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-*to each .btn-group, including when nesting multiple groups.

<div class="btn-group btn-group-lg mb-15" role="group" aria-label="Large button group">    <button type="button" class="btn btn-default">Left</button>    <button type="button" class="btn btn-default">Middle</button>    <button type="button" class="btn btn-default">Right</button></div><br><div class="btn-group mb-15" role="group" aria-label="Default button group">    <button type="button" class="btn btn-default">Left</button>    <button type="button" class="btn btn-default">Middle</button>    <button type="button" class="btn btn-default">Right</button></div><br><div class="btn-group btn-group-sm mb-15" role="group" aria-label="Small button group">    <button type="button" class="btn btn-default">Left</button>    <button type="button" class="btn btn-default">Middle</button>    <button type="button" class="btn btn-default">Right</button></div><br><div class="btn-group btn-group-xs mb-15" role="group" aria-label="Extra-small button group">    <button type="button" class="btn btn-default">Left</button>    <button type="button" class="btn btn-default">Middle</button>    <button type="button" class="btn btn-default">Right</button></div>

Nesting

Place a .btn-groupwithin another .btn-groupwhen you want dropdown menus mixed with a series of buttons.

<div class="btn-group" role="group" >    <button type="button" class="btn btn-default">1</button>    <button type="button" class="btn btn-default">2</button>    <div class="btn-group" role="group">        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">            Dropdown            <span class="caret"></span>        </button>        <ul class="dropdown-menu">            <li><a href="#">Dropdown link</a></li>            <li><a href="#">Dropdown link</a></li>        </ul>    </div>    <!-- /.btn-group --></div><!-- /.btn-group -->

Vertical Button Group

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">    <button type="button" class="btn btn-default">Button</button>    <button type="button" class="btn btn-default">Button</button>    <div class="btn-group" role="group">        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button>        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">            <li><a href="#">Dropdown link</a></li>            <li><a href="#">Dropdown link</a></li>        </ul>    </div>    <button type="button" class="btn btn-default">Button</button>    <button type="button" class="btn btn-default">Button</button>    <div class="btn-group" role="group">        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button>        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">            <li><a href="#">Dropdown link</a></li>            <li><a href="#">Dropdown link</a></li>        </ul>    </div>    <div class="btn-group" role="group">        <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button>        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">            <li><a href="#">Dropdown link</a></li>            <li><a href="#">Dropdown link</a></li>        </ul>    </div>    <div class="btn-group" role="group">        <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button>        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">            <li><a href="#">Dropdown link</a></li>            <li><a href="#">Dropdown link</a></li>        </ul>    </div></div><!-- /.btn-group-vertical -->

Justified Button Group

To use justified button groups with <button>elements, you must wrap each button in a button group. Wrap all these button groups in a wrapper with class .btn-group.btn-group-justified. Most browsers don't properly apply our CSS for justification to <button>elements, but since we support button dropdowns, we can work around that.

<div class="btn-group btn-group-justified" role="group" >    <div class="btn-group" role="group">        <button type="button" class="btn btn-default">Left</button>    </div>    <div class="btn-group" role="group">        <button type="button" class="btn btn-default">Middle</button>    </div>    <div class="btn-group" role="group">        <button type="button" class="btn btn-default">Right</button>    </div></div>

Checkbox Button Group

Add data-toggle="buttons"to a .btn-groupcontaining checkbox or radio inputs to enable toggling in their respective styles.

Checkbox 1 (pre-checked)Checkbox 2Checkbox 3

<div class="btn-group" data-toggle="buttons">    <label class="btn btn-primary active">        <input type="checkbox" checked> Checkbox 1 (pre-checked)    </label>    <label class="btn btn-primary">        <input type="checkbox"> Checkbox 2    </label>    <label class="btn btn-primary">        <input type="checkbox"> Checkbox 3    </label></div>

Radio Button Group