Bootstrap 4 Components
You can group a series of buttons together horizontally or vertically.
Horizontal Button Group
To add a horizontal button group wrap a series of a button within a
Vertical Button Group
Instead of .btn-group use .btn-group-vertical to stack buttons vertically.
You can combine two or more button groups to create a button toolbar. For this, nest the button groups inside a <div> with the class
You don’t have to size each and every button in the button group you can simply specify the size of the buttons by adding
.btn-group-lg for large size and .
btn-group-sm for smaller sized buttons.
Dropdowns in Button Groups
You can add dropdowns in a button group by placing the drop down in a separate button group and nesting the button group inside another button group.
Following code shows how we can have a split dropdown button group using button group.
Note: Split dropdown in button groups are not supported in the vertical stacking of the button groups.
Like dropdowns, mix different input groups within button groups into your toolbars.