Bootstrap 4 Button Group

Bootstrap 4 provides a feature button group that helps in creating a series of buttons together in a group.

Basic Button Group

 The .btn-group class is used within the <div> tag to create a button group.

Syntax

Output

Bootstrap Buttons Groups

Sizing

Bootstrap 4 allows you to customize the size of your button as per the requirement.

  • Add the .btn-group-lg class to the <div> element to create larger group buttons than default size.
  • Add the .btn-group-sm class to the <div> element to create a smaller button group than the default one.

Syntax

Output

Bootstrap Buttons Groups

Nesting

Nesting allows you to create a series of buttons within a dropdown. To create a nested button, you have to put .btn-group class within another .btn-group class.

Syntax

Output

Bootstrap Buttons Groups

Vertical Button Group with Dropdown

In the vertical button group, the buttons are in vertical order instead of horizontal.  To create a vertical button group, add .btn-group-vertical class to the <div> element.

Syntax

Output

Bootstrap Buttons Groups