Bootstrap 4 Button Groups
Group buttons together on a single line with Bootstrap 4's button groups.
Bootstrap button groups allow you to group buttons together, either horizontally or vertically.
Horizontal Button Group
Vertical Button Group
Replace btn-group
with btn-group-vertical
to make the button group stack vertically.
Button Group Size
Bootstrap enables you to control the size of all buttons within the group (so that you don't need to change each button individually).
To do this, add either of the .btn-group-sm
or .btn-group-lg
class to the .button-group
class to make all buttons within the group small or large.
Omitting these classes will result in a button group at the default size.
Bootstrap 3 supports extra small button groups with the .btn-group-xs
class, but this was dropped in Bootstrap 4.
Button Toolbar
You can combine button groups together into a single toolbar if required.
To do this, nest the button group inside a <div>
element with Bootstrap's .btn-toolbar
class applied.
Combining Dropdowns with Button Groups
You can nest dropdowns within button groups by using a separate button group for the dropdown, then nesting it inside the other one.
Split Dropdowns
Use button groups to create a split dropdown menu.