In this Bootstrap 4 tutorial, you will learn how to use the bootstrap button group component. To create button groups just wrap a series of buttons with .btn class in an <div> element and apply the class .btn-group on it. These bootstrap button groups allow you to group buttons together, either vertically or horizontally.
Horizontal Button Group:
For horizontally arrange button groups simply use .btn-group class in an <div> element. The horizontally arrange button are by default but if we want the vertically arrange group then need to use .btn-group-vertical.
Vertical Button Group:
For vertically arrange button groups use a .btn-group-vertical class instead of .btn-group.
Button Group Size:
If you want the button size larger or smaller then directly use button group sizing classes instead of using button sizing classes to every button in a group. for example .btn-group-lg or .btn-group-sm classes to each .btn-group element to create larger or smaller button group. If you omitting these classes then the button group is the default size.
Button Toolbar:
In this Bootstrap 4 tutorial, you can also learn how to combine sets of button groups into the single toolbar. To do this, just wrap sets of button groups in an <div> element and apply the class .btn-toolbar on it.
Nesting Button Groups:
For nested button group place .btn-group inside another .btn-group to create dropdown menus inside button groups.
Justified Button Groups:
For an equal length button and full-width button group, use flex utility class .d-flex to the .btn-group element. The below example shows how to use flex class.