tutorialstonight logo
A Platform To Learn To Code

BOOTSTRAP 4 BUTTONS GROUP



Using Bootstrap 4 you can group a series of buttons together in a single line with the button group.

To wrap a series of buttons with .btn class just put all those buttons in a div element and add .btn-group class to it.

Example

Run the code

Button Group Size

You can increase and decrease size of each button using bootstrap 4 button group class. Instead of applying button sizing classes to every button just add .btn-group-lg and .btn-group-sm to increase and decrease button size respectively.

Large button group

Default button

Small button group

Example

Run the code

Nesting Button Groups In Bootstrap

Using bootstrap you can also nest button groups. Place a .btn-group within another .btn-group to create a dropdown menus inside button groups.

Example

Run the code

Split Button Dropdown

To create button split use .dropdown-toggle-split class.

Example

Run the code

Verticle Button Group In Bootstrap

By default buttons in button group in bootstrap is in horizontal but you can chage orientation of button to verticle order.

To create a verticlly stacked button group just replace .btn-group with .btn-group-vertical.

Example

Run the code

Bootstrap 4 Button Toolbar

For more complex components you can combine sets of button groups into toolbars. To create a button toolbar make a collection of button groups and use bootstrap's utility classes to saperate them. Example: for margin-right use .mr-*.

Example

Run the code

points to remember Points to remember:
  1. To create a button group just wrap your buttons with .btn classes by a div element and add .btn-group class to it.
  2. To create a vertical button group replace .btn-group with .btn-group-vertical.
  3. You can also nest a group element into one another.
Bootstrap 4 Lists