Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Button Groups


Button Groups

Bootstrap 4 allows us to group a series of buttons together in a single line through the button group component.

This is useful when we want to align buttons together.

Use a <div> element with class .btn-group to create a button group.

Run code

Vertical Button Groups

Bootstrap 4 also supports vertical button groups.

Use the class .btn-group-vertical to create a vertical button group. This class make a set of buttons appear vertically stacked rather than horizontally.

Run code

Button Group Size

Bootstrap 4 gives us option further to scaling a button group up or down.

Add the .btn-group-lg class for large buttons or .btn-group-sm class for small buttons.

These classes can be applied to button group instead of resizing each button.

Large Buttons:
Default Buttons:
Small Buttons:
Run code

Nested Button Groups & Dropdown Menus

We can nest button groups within another button group i.e, place a .btn-group within another .btn-group.

This is done when we want dropdown menus mixed with a series of buttons.

Run code

Split Button Dropdowns

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.

Run code

Nested Vertical Button Groups & Dropdown Menus

We can also nest .btn-group within .btn-group-vertical.

Note: Split button dropdowns are not supported here.

Run code

Justified Button Groups

Stretch your button groups to fill all the available width by applying the flex utility class .d-flex to the .btn-group element.

Run code

Creating Button Toolbar

You can combine sets of button groups into button toolbars for more complex components.

To create button toolbar just wrap sets of button groups in a <div> element and apply the class .btn-toolbar on it:

Run code

Feel free to mix icons with button groups in your toolbars:

Run code

Feel free to mix input groups with button groups in your toolbars:

@
@
Run code