Button Groups

Button groups

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Basic example

Wrap a series of buttons with .btn in .btn-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 variation

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

Justified button groups

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

With <a> elements

Just wrap a series of .btn in .btn-group.btn-group-justified.

LeftMiddleRight
LeftMiddle