Bootstrap 4 | Button Groups
Bootstrap offers classes which allow to group buttons along the same line, horizontally or vertically. The buttons to be grouped are nested inside a <div> element with the class .btn-group.
Horizontally arranged button groups: The .btn-group class is used to create horizontally arranged button groups.
Vertically arranged button groups: The .btn-group-vertical class is used in parent div to create vertical button group.
Button group sizing: The whole button group can be given the same size by including the class btn-group-* (* could be sm, md or lg) in the .btn-group parent element, instead of including sizing classes in each button.
Nesting button groups and making dropdown menus: A button group can be nested within another button group and dropdown menus can be created this way.
- Single button dropdown:
- Split button dropdown:
However, the split button dropdown does not work as expected when the buttons are nested under .btn-group-vertical class.
- Google Chrome
- Internet Explorer