Button group Basic example

Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

These classes can also be added to groups of links, as an alternative to the `.nav` navigation components.

Active link Link Link
Button group Mixed styles
Outlined styles
Button group Checkbox and radio button groups

Combine button-like checkbox and radio toggle buttons into a seamless looking button group.

Checkbox 1 Checkbox 2 Checkbox 3
Radio 1 Radio 2 Radio 3
Button group Button toolbar

Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more.

Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.

@
@
Button group Sizing

Alternatively, of implementing button sizing classes to each button in a group, add `.btn-group-*` to all `.btn-group`, including each one when nesting multiple groups.

Button group Nesting

Put a `.btn-group` inside another `.btn-group` when you need dropdown menus combined with a series of buttons.

Button group Vertical variation

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

Radio 1 Radio 2 Radio 3