Bootstrap - Button Groups

We have styled all Bootstrap elements just as you want!

Basic Example

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

Button Toolbar

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

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.




Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

Vertical Button Group

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

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.

Checkbox Button Group

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

Radio Button Group

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