Button group

Examples #

You can group together buttons by putting them in a container with .btn-group. This supports all types of button variants, including outline ones. Links (styled as buttons) can also be grouped together as an alternative to the navigation components.

<!-- Basic button group -->
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Item 1</button>
  <button type="button" class="btn btn-secondary">Item 2</button>
  <button type="button" class="btn btn-secondary">Item 3</button>
</div>

<!-- Mixed button group -->
<div class="btn-group" role="group" aria-label="Mixed example">
  <button type="button" class="btn btn-primary">Item 1</button>
  <button type="button" class="btn btn-secondary">Item 2</button>
  <button type="button" class="btn btn-secondary">Item 3</button>
</div>

<!-- Outline button group -->
<div class="btn-group" role="group" aria-label="Outline example">
  <button type="button" class="btn btn-outline-primary">Item 1</button>
  <button type="button" class="btn btn-outline-primary">Item 2</button>
  <button type="button" class="btn btn-outline-primary">Item 3</button>
</div>

<!-- Link button group -->
<div class="btn-group" role="group" aria-label="Link example">
  <a href="#" class="btn btn-primary active" aria-current="page">Item 1</a>
  <a href="#" class="btn btn-primary">Item 2</a>
  <a href="#" class="btn btn-primary">Item 3</a>
</div>

Checkbox and radio button groups #

Group together checkbox and radio toggle buttons into a seamless looking button group.

<!-- Checkbox button group -->
<div class="btn-group" role="group" aria-label="Checkbox button group">
  <input type="checkbox" class="btn-check" id="example-checkbox-1" autocomplete="off">
  <label class="btn btn-outline-primary" for="example-checkbox-1">Python</label>

  <input type="checkbox" class="btn-check" id="example-checkbox-2" autocomplete="off">
  <label class="btn btn-outline-primary" for="example-checkbox-2">JavaScript</label>

  <input type="checkbox" class="btn-check" id="example-checkbox-3" autocomplete="off" disabled>
  <label class="btn btn-outline-primary" for="example-checkbox-3">C++</label>
</div>

<!-- Radio button group -->
<div class="btn-group" role="group" aria-label="Radio button group">
  <input type="radio" name="radio-group-1" class="btn-check" id="example-radio-1" autocomplete="off">
  <label class="btn btn-outline-primary" for="example-radio-1">Back-end</label>

  <input type="radio" name="radio-group-1" class="btn-check" id="example-radio-2" autocomplete="off">
  <label class="btn btn-outline-primary" for="example-radio-2">Front-end</label>

  <input type="radio" name="radio-group-1" class="btn-check" id="example-radio-3" autocomplete="off" disabled>
  <label class="btn btn-outline-primary" for="example-radio-3">Full-stack</label>
</div>

Button toolbar #

Multiple button groups can be grouped together by putting them inside a container with the .btn-toolbar class. You can also put input groups inside button toolbars to create more complex components. In any case, you will need to use utility classes to space out buttons, groups, and more. Also remember to add role="toolbar" to the toolbar.

<!-- Basic button toolbar -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar basic example">
  <div class="btn-group" role="group" aria-label="Group one">
    <button type="button" class="btn btn-secondary">Item 1</button>
    <button type="button" class="btn btn-secondary">Item 2</button>
  </div>
  <div class="btn-group ms-2" role="group" aria-label="Group two">
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
</div>

<!-- Button toolbar with input group -->
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with input group">
  <div class="btn-group" role="group" aria-label="Group one">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
  </div>
  <div class="input-group">
    <span class="input-group-text" id="add-on-1">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="add-on-1">
  </div>
</div>

Sizing #

Create small and large button groups with the .btn-group-sm and .btn-group-lg classes respectively.

<!-- Small button group -->
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
  <button type="button" class="btn btn-primary">Item 1</button>
  <button type="button" class="btn btn-secondary">Item 2</button>
  <button type="button" class="btn btn-secondary">Item 3</button>
</div>

<!-- Regular button group -->
<div class="btn-group" role="group" aria-label="Regular button group">
  <button type="button" class="btn btn-primary">Item 1</button>
  <button type="button" class="btn btn-secondary">Item 2</button>
  <button type="button" class="btn btn-secondary">Item 3</button>
</div>

<!-- Large button group -->
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  <button type="button" class="btn btn-primary">Item 1</button>
  <button type="button" class="btn btn-secondary">Item 2</button>
  <button type="button" class="btn btn-secondary">Item 3</button>
</div>

Nesting #

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons. This is a very handy way to abstract away less important actions into a menu that opens on click.

<!-- Button group with nested dropdown -->
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">View</button>
  <button type="button" class="btn btn-secondary">Edit</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      More
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Move</a></li>
      <li><a class="dropdown-item" href="#">Share</a></li>
      <li><a class="dropdown-item" href="#">Archive</a></li>
    </ul>
  </div>
</div>

Vertical variation #

You can also group buttons together vertically (as opposed to horizontally) using .btn-group-vertical. While nested dropdown menus are supported here, split button dropdowns are not. Everything else listed on this page (including checkbox and radio button groups) is supported.

Each button inside a vertical button group will take up the same width as the widest item. However, you can manually set a width to the container using inline CSS or a utility class.

<!-- Vertical button group with nested dropdown -->
<div class="btn-group-vertical" style="width: 200px;" role="group" aria-label="Vertical button group with nested dropdown">
  <button type="button" class="btn btn-secondary text-start px-3">View</button>
  <button type="button" class="btn btn-secondary text-start px-3">Edit</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary text-start px-3 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      More
    </button>
    <ul class="dropdown-menu w-100">
      <li><a class="dropdown-item" href="#">Move</a></li>
      <li><a class="dropdown-item" href="#">Share</a></li>
      <li><a class="dropdown-item" href="#">Archive</a></li>
    </ul>
  </div>
</div>