Bootstrap 5 — Button Groups

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add button groups with Bootstrap 5.

Button Group

Button groups let us group a series of buttons together on a single line.

To add one, we can write:

<div class="btn-group">  
  <button type="button" class="btn btn-secondary">left</button>  
  <button type="button" class="btn btn-secondary">center</button>  
  <button type="button" class="btn btn-secondary">right</button>  
</div>

We have the .btn-group class to create the button group.

Also, we can use the .active class to highlight a button.

For example, we can write:

<div class="btn-group">  
  <button type="button" class="btn btn-secondary active">left</button>  
  <button type="button" class="btn btn-secondary">center</button>  
  <button type="button" class="btn btn-secondary">right</button>  
</div>

This also works with links:

<div class="btn-group">  
  <a href="#" class="btn btn-secondary active">left</a>  
  <a href="#" class="btn btn-secondary">center</a>  
  <a href="#" class="btn btn-secondary">right</a>  
</div>

The active class works with both buttons and links.

Outlined Styles

The button group can have outlined styles instead of background color.

For example, we can write:

<div class="btn-group">  
  <a href="#" class="btn btn-outline-secondary">left</a>  
  <a href="#" class="btn btn-outline-secondary">center</a>  
  <a href="#" class="btn btn-outline-secondary">right</a>  
</div>

We have the btn-outline-secondary class on each button to make the buttons outlined.

Button Toolbar

To group button groups together, we can add button toolbars.

For example, we can write:

<div class="btn-toolbar">  
  <div class="btn-group mr-2">  
    <button type="button" class="btn btn-primary">1</button>  
    <button type="button" class="btn btn-primary">2</button>  
    <button type="button" class="btn btn-primary">3</button>  
  </div>  
  <div class="btn-group mr-2">  
    <button type="button" class="btn btn-primary">4</button>  
    <button type="button" class="btn btn-primary">5</button>  
    <button type="button" class="btn btn-primary">6</button>  
  </div>  
  <div class="btn-group">  
    <button type="button" class="btn btn-primary">7</button>  
    <button type="button" class="btn btn-primary">8</button>  
  </div>  
</div>

We have the div with the btn-toolbar class to add the button group.

Then we have the button groups inside.

We add mr-2 to add some margins to the right.

Sizing

Button group sizes can be changed.

The btn-group-* classes can let us change the size.

For example, we can write:

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

to add a button group with large buttons.

This is done with the btn-group-lg class.

To make a button group with small buttons, we can write:

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

This is done with the btn-group-sm class.

Nesting

Button groups can be nested.

For example, we can write:

<div class="btn-group">  
  <button type="button" class="btn btn-secondary">left</button>  
  <button type="button" class="btn btn-secondary">center</button>

  <div class="btn-group">  
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">  
      Dropdown  
    </button>  
    <ul class="dropdown-menu">  
      <li><a class="dropdown-item" href="#">foo</a></li>  
      <li><a class="dropdown-item" href="#">bar</a></li>  
    </ul>  
  </div>  
</div>

We put a button group inside another button group so that we can add a dropdown to our code.

The dropdown is in one button group.

We have a button for the dropdown toggle and a ul for the menu.

Vertical Variation

We can make button groups vertical with the btn-group-vertical class.

Split button dropdowns aren’t supported with vertical button groups.

To add one, we can write:

<div class="btn-group-vertical">  
  <button type="button" class="btn btn-secondary">left</button>  
  <button type="button" class="btn btn-secondary">center</button>

  <div class="btn-group">  
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">  
      Dropdown  
    </button>  
    <ul class="dropdown-menu">  
      <li><a class="dropdown-item" href="#">foo</a></li>  
      <li><a class="dropdown-item" href="#">bar</a></li>  
    </ul>  
  </div>  
</div>

We just add the btn-group-vertical class to make it vertical.

Conclusion

Button groups let us add multiple buttons into one container.

We can nest them and add dropdowns to them.