Basic example#
Wrap a series of buttons with .btn in .btn-group.
{ {< example >} }
{ {< /example >} }
{ {< callout info >} }
Button groups require an appropriate role attribute and explicit label to
ensure assistive technologies like screen readers identify buttons as grouped
and announce them. Use role="group" for button groups or role="toolbar" for
button toolbars. Then use aria-label or aria-labelledby to label them.
{ {< /callout >} }
These classes can also be added to groups of links, as an alternative to the
.nav navigation components.
{ {< example >} }
{ {< /example >} }
Mixed styles#
{ {< example >} }
{ {< /example >} }
Outlined styles#
{ {< example >} }
{ {< /example >} }
Checkbox and radio button groups#
Combine button-like checkbox and radio toggle buttons into a seamless looking button group.
{ {< example >} }
{ {< /example >} }
{ {< example >} }
{ {< /example >} }
Button toolbar#
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
{ {< example >} }
{ {< /example >} }
Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly.
{ {< example >} }
{ {< /example >} }
Sizing#
Instead of applying button sizing classes to every button in a group, just add
.btn-group-* to each .btn-group, including each one when nesting multiple
groups.
{ {< example >} }
{ {< /example >} }
Nesting#
Place a .btn-group within another .btn-group when you want dropdown menus
mixed with a series of buttons.
{ {< example >} }
{ {< /example >} }
Vertical variation#
Make a set of buttons appear vertically stacked rather than horizontally. * Split button dropdowns are not supported here.*
{ {< example >} }
{ {< /example >} }
{ {< example >} }
{ {< /example >} }
{ {< example >} }
{ {< /example >} }