Bootstrap - Button Groups
We have styled all Bootstrap elements just as you want!
<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-group
within another .btn-group
when 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-group
containing checkbox or radio inputs to enable toggling in their respective styles.
<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
Add data-toggle="buttons"
to a .btn-group
containing checkbox or radio inputs to enable toggling in their respective styles.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Radio 3
</label>
</div>