Group a series of buttons together on a single line with the button group.
Wrap a series of buttons with .btn in .btn-group.
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 role="toolbar".
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.
Add .btn-group-lg(large) and .btn-group-sm(sm) to each .btn-group.
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>
