Bootstrap 5 Button Groups

Bootstrap 5 provides a flexible and easy way to create button groups, which allow you to group multiple buttons together for various purposes.

Basic Button Group

To create a basic button group, wrap your buttons in a <div> element with the class .btn-group. By default, the buttons in the group will be horizontally arranged.

Example

<div class="btn-group">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <button class="btn btn-primary">Button 3</button>
</div>

Try it Yourself

Button Group Sizing

You can control the size of button groups using classes like .btn-group-lg and .btn-group-sm .

Example

!---Small Size----!
<div class="btn-group btn-group-sm">
   .....
</div>
!---Default Size----!
<div class="btn-group">
   .....
</div>
!---Large Size----!
<div class="btn-group btn-group-lg">
   .....
</div>

Try it Yourself

Vertical Button Group

You can create a vertical button group by adding the .btn-group-vertical class.

Example

<div class="btn-group-vertical">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <button class="btn btn-primary">Button 3</button>
</div>

Try it Yourself

Button Group with Mixed Styles

You can also combine different button styles such as color and outline.

Example

<div class="btn-group">
  <button class="btn btn-success">Button 1</button>
  <button class="btn btn-warning">Button 2</button>
  <button class="btn btn-danger">Button 3</button>
</div>
<div class="btn-group">
  <button class="btn btn-outline-success">Button 1</button>
  <button class="btn btn-outline-warning">Button 2</button>
  <button class="btn btn-outline-danger">Button 3</button>
</div>

Try it Yourself

Button Group with Dropdowns

You can combine button groups with dropdowns to create complex UI components that include both buttons and dropdown menus.

Example

<div class="btn-group">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <button class="btn btn-primary">Button 3</button>
  <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Item 1</a></li>
    <li><a class="dropdown-item" href="#">Item 2</a></li>
    <li><a class="dropdown-item" href="#">Item 3</a></li>
  </ul>
</div>

Try it Yourself