Bootstrap 4 Components

Button Groups

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 <div> with .btn-group.

Vertical Button Group

Instead of .btn-group use .btn-group-vertical to stack buttons vertically.

Button Toolbar

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 .btn-toolbar.

Button Sizing

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.

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.