Bootstrap 3 Button Groups
Group buttons together on a single line with Bootstrap's button groups.
Bootstrap button groups allow you to group buttons together, either horizontally or vertically.
Horizontal Button Group
Vertical Button Group
btn-group-vertical to make the button group stack vertically.
Button Group Size
Bootstrap enables you to control the size of all buttons within the group (so that you don't need to change each button individually).
To do this, add either of the
.btn-group-lg classes to the
.button-group class make all buttons within the group large, small, or extra small respectively.
You can combine button groups together into a single toolbar if required.
To do this, nest the button group inside a
<div> element with Bootstrap's
.btn-toolbar class applied.
Combining Dropdowns with Button Groups
You can nest dropdowns within button groups by using a separate button group for the dropdown, then nesting it inside the other one.
Use button groups to create a split dropdown menu.
Justified Button Groups
Button groups can be justified, so that the button group fills up the full width of its parent and the buttons widths expand accordingly.
Buttons Created with
.btn-group-justified to the button group.
When using the
<a> element to behave as a button (eg, triggering a client-side script, rather than navigating to another URL), use
These button groups require some extra code.
In addition to adding
.btn-group-justified to the button group, you must nest each button within its own button group.