Button group

Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.

Bootstrap documentation


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

Button toolbar

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button class="btn btn-secondary" type="button">1</button>
    <button class="btn btn-secondary" type="button">2</button>
    <button class="btn btn-secondary" type="button">3</button>
    <button class="btn btn-secondary" type="button">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button class="btn btn-secondary" type="button">5</button>
    <button class="btn btn-secondary" type="button">6</button>
    <button class="btn btn-secondary" type="button">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button class="btn btn-secondary" type="button">8</button>
  </div>
</div>

Sizing

<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
  <button class="btn btn-secondary" type="button">Left</button>
  <button class="btn btn-secondary" type="button">Middle</button>
  <button class="btn btn-secondary" type="button">Right</button>
</div>

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

<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
  <button class="btn btn-secondary" type="button">Left</button>
  <button class="btn btn-secondary" type="button">Middle</button>
  <button class="btn btn-secondary" type="button">Right</button>
</div>