Bootstrap 5 Button Groups

Bootstrap 5 allows you to group a series of buttons together (on a single line) in a button group:

The .btn-group class creates a button group:

Example

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple </button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Button Groups Sizes

Add class .btn-group-* to size all buttons in a button group.

Large Buttons:

Default Buttons:

Small Buttons:

Example

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Vertical Button Groups

Bootstrap 5 also supports vertical button groups:

Use the class .btn-group-vertical to create a vertical button group:

Example

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
 <button type="button" class="btn btn-primary">Samsung</button>
 <button type="button" class="btn btn-primary">Sony</button>
</div>

Button Groups Side by Sides

Button groups are "inline" by default, which makes them appear side by side when you have multiple groups:

Example

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary">BMW</button>
 <button type="button" class="btn btn-primary">Mercedes</button>
  <button type="button" class="btn btn-primary">Volvo</button>
</div>

Nesting Button Groups & Dropdown Menus


  
  
  
    
    
      Tablet
      Smartphone

Example

<div class="btn-group">
<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
   <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
<div class="dropdown-menu">
     <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>