Buttons groups give access to frequently performed, related actions. Buttons appear attached to one another as opposed to a group of unattached buttons.
- If the purpose is for a general group of buttons, include the
role="group" attribute to the
.btn-group container. If the button group's purpose is for a toolbar, use the
role="toolbar" attribute instead.
- Be aware of how button groups look on mobile devices because the group could be split into two lines of buttons, breaking the group.
Default Button Groups Code
These horizontal button groups commonly appear near the top of the page.
Justified Button Groups Code
A justified button group expands to the width of the parent container
List of Buttons: An Alternative to Horizontal Button Groups Code
If you wish to have a group of unattached buttons, simply use an unstyled, inline list with a button in each line item. This will ensure that buttons wrap without overlapping one another.
Vertical Button Groups Code
Vertical button groups commonly appear on a sidebar or within a card.