tutorialstonight logo

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.


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

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.


Split Button Dropdown

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


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.


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-*.


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