Skip to main content Skip to docs navigation

Button Group

Group a series of buttons together on a single line or stack them in a vertical column.

Basic example

Wrap a series of buttons with .btn in .btn-group.

html 
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>
Button groups require an appropriate role attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use role="group" for button groups or role="toolbar" for button toolbars. Then use aria-label or aria-labelledby to label them.

These classes can also be added to groups of links, as an alternative to the .nav navigation components.

Active link Link Link
html 
<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
  <a href="#" class="btn btn-primary">Link</a>
  <a href="#" class="btn btn-primary">Link</a>
</div>

Outlined styles

html 
<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

Checkbox and radio button groups

Combine button-like checkbox and radio toggle buttons into a seamless looking button group.

html 
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

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

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
html 
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
html 
<div class="btn-group" role="group" aria-label="Icon radio toggle button group">
  <input type="radio" class="btn-check" name="btnradioIcon" id="btnradio1Icon" autocomplete="off" checked aria-label="volume down">
  <label class="btn btn-outline-primary" for="btnradio1Icon" style="padding: 0.5px 3px; width: 32px;">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
    <path d="M11.15 2.85 7 7H4c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h3l4.15 4.15c.32.32.85.09.85-.35V3.21c0-.45-.54-.67-.85-.35Zm6.35 4.8a.762.762 0 0 0-1.13-.07c-.26.26-.3.69-.07.98a5.47 5.47 0 0 1 0 6.84c-.23.29-.2.71.07.98.32.32.85.29 1.13-.07.94-1.19 1.5-2.7 1.5-4.33s-.56-3.14-1.5-4.33Z"/></svg>
  </label>
  <input type="radio" class="btn-check" name="btnradioIcon" id="btnradio2Icon" autocomplete="off" aria-label="volume up">
  <label class="btn btn-outline-primary" for="btnradio2Icon" style="padding: 0.5px 3px; width: 32px;">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
    <path d="M14.22 9.75c-.26.26-.28.65-.09.96.23.38.36.82.36 1.3s-.13.92-.36 1.3c-.19.31-.17.7.09.96.33.33.89.3 1.14-.09a3.972 3.972 0 0 0 0-4.32c-.25-.39-.81-.42-1.14-.09v-.02Zm-3.08-6.89L6.99 7.01h-3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h3l4.15 4.15c.32.32.85.09.85-.35V3.21c0-.45-.54-.67-.85-.35Zm8.48 2.68a.759.759 0 0 0-1.12-.06c-.27.27-.31.71-.06 1 1.28 1.49 2.05 3.42 2.05 5.53s-.77 4.04-2.05 5.53c-.25.29-.21.73.06 1 .32.32.83.28 1.12-.06 1.48-1.74 2.38-4 2.38-6.47s-.89-4.73-2.38-6.47Zm-2.13 2.14a.762.762 0 0 0-1.13-.07c-.26.26-.3.69-.07.98a5.47 5.47 0 0 1 0 6.84c-.23.29-.2.71.07.98.32.32.85.29 1.13-.07.94-1.19 1.5-2.7 1.5-4.33s-.56-3.14-1.5-4.33Z"/></svg>
  </label>
  <input type="radio" class="btn-check" name="btnradioIcon" id="btnradio3Icon" autocomplete="off" aria-label="Mute">
  <label class="btn btn-outline-primary" for="btnradio3Icon" style="padding: 0.5px 3px; width: 32px;">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
    <path d="M11.15 2.85 7 7H4c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h3l4.15 4.15c.32.32.85.09.85-.35V3.21c0-.45-.54-.67-.85-.35Zm7.91 9.14 1.47-1.47c.29-.29.29-.77 0-1.06s-.77-.29-1.06 0L18 10.93l-1.47-1.47c-.29-.29-.77-.29-1.06 0s-.29.77 0 1.06l1.47 1.47-1.47 1.47c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22L18 13.05l1.47 1.47c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.47-1.47Z"/></svg>
  </label>
</div>
html 
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradioDark" id="btnradioDark1" autocomplete="off" checked>
  <label class="btn btn-outline-secondary" for="btnradioDark1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradioDark" id="btnradioDark2" autocomplete="off">
  <label class="btn btn-outline-secondary" for="btnradioDark2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradioDark" id="btnradioDark3" autocomplete="off">
  <label class="btn btn-outline-secondary" for="btnradioDark3">Radio 3</label>
</div>

Button toolbar

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

html 
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <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>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>

Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.

html 
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups.



html 
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>
<br>
<div class="btn-group" role="group" aria-label="Default button group">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

html 
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

html 
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
</div>
html 
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
  <div class="btn-group dropend" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
  <div class="btn-group dropup" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>
html 
<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
  <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
  <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
  <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
</div>
View on GitHub
Last updated August 31, 2024.
On this page