Group a series of buttons together on a single line with the button group.
Wrap a series of buttons with
For assistive technologies (such as screen readers) give an appropriate
role attribute to convey that a series of buttons is grouped. For button groups, this would be
role="group", while toolbars should have a
For groups and toolbars give an explicit label as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the below examples
aria-label is used, but alternatives such as
aria-labelledby can also be used.
Button toolbar are made by combining sets of button groups into button toolbars by wrapping multiple button groups with .btn-toolbar. Use utility classes as needed to space out groups, buttons, and more.
You can add input groups with button groups in your toolbars. Use utilities to space properly.
.btn-group-sm(sm) to each
You can place a
.btn-group within another
.btn-group when you want dropdown menus added with a series of buttons.
Add .btn-group-vertical to make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported.
<div class="btn-group-vertical"> ... </div>