Bootstrap docs

# Button group

Groups a series of buttons together on a single line.

#### Basic example

    <!-- Solid button group -->
    <div class="btn-group" role="group" aria-label="Solid button group">
      <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>

    <!-- Outline button group -->
    <div class="btn-group" role="group" aria-label="Outline 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>

    <!-- Pill shape solid button group -->
    <div class="btn-group" role="group" aria-label="Solid button group">
      <button type="button" class="btn btn-secondary rounded-pill rounded-end-0">Left</button>
      <button type="button" class="btn btn-secondary">Middle</button>
      <button type="button" class="btn btn-secondary rounded-pill rounded-start-0">Right</button>
    </div>

    <!-- Pill shape outline button group -->
    <div class="btn-group" role="group" aria-label="Outline button group">
      <button type="button" class="btn btn-outline-secondary rounded-pill rounded-end-0">Left</button>
      <button type="button" class="btn btn-outline-secondary">Middle</button>
      <button type="button" class="btn btn-outline-secondary rounded-pill rounded-start-0">Right</button>
    </div>

#### Checkboxes and radio buttons

Check 1 Check 2 Check 3
Radio 1 Radio 2 Radio 3

    <!-- Checkbox toggle button group -->
    <div class="btn-group" role="group" aria-label="Checkbox toggle button group">
      <input type="checkbox" class="btn-check" id="btncheck1">
      <label class="btn btn-outline-primary" for="btncheck1">Check 1</label>
      <input type="checkbox" class="btn-check" id="btncheck2">
      <label class="btn btn-outline-primary" for="btncheck2">Check 2</label>
      <input type="checkbox" class="btn-check" id="btncheck3">
      <label class="btn btn-outline-primary" for="btncheck3">Check 3</label>
    </div>

    <!-- Radio toggle button group -->
    <div class="btn-group" role="group" aria-label="Radio toggle button group">
      <input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
      <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
      <input type="radio" class="btn-check" name="btnradio" id="btnradio2">
      <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
      <input type="radio" class="btn-check" name="btnradio" id="btnradio3">
      <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
    </div>

#### Button toolbar

    <!-- Toolbar example -->
    <div class="btn-toolbar" role="toolbar" aria-label="Settings toolbar">
      <div class="btn-group me-2 mb-2" role="group" aria-label="Settings group">
        <button type="button" class="btn btn-dark btn-icon fs-base" aria-label="Settings">
          <i class="ci-settings"></i>
        </button>
        <button type="button" class="btn btn-secondary btn-icon fs-base">A</button>
        <button type="button" class="btn btn-secondary btn-icon fs-lg" aria-label="List">
          <i class="ci-list"></i>
        </button>
        <button type="button" class="btn btn-secondary btn-icon fs-base" aria-label="Expand">
          <i class="ci-maximize"></i>
        </button>
      </div>
      <div class="btn-group me-2 mb-2" role="group" aria-label="Apply settings">
        <button type="button" class="btn btn-success">
          <i class="ci-check fs-base ms-n1 me-2"></i>
          Apply
        </button>
      </div>
      <div class="btn-group mb-2" role="group" aria-label="Delete settings">
        <button type="button" class="btn btn-outline-danger btn-icon fs-lg" aria-label="Delete">
          <i class="ci-trash"></i>
        </button>
      </div>
    </div>

    <!-- Pagination example -->
    <div class="btn-toolbar" role="toolbar" aria-label="Pagination">
      <div class="btn-group me-2 mb-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>
      </div>
      <div class="btn-group me-2 mb-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-outline-secondary">4</button>
        <button type="button" class="btn btn-outline-secondary">5</button>
      </div>
      <div class="btn-group mb-2" role="group" aria-label="Third group">
        <button type="button" class="btn btn-outline-secondary">6</button>
      </div>
    </div>

#### Nested dropdown

    <!-- Button group with nested dropdown -->
    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
      <button type="button" class="btn btn-outline-secondary">1</button>
      <button type="button" class="btn btn-outline-secondary">2</button>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" 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>
          <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>

#### Sizing

    <!-- Large button group -->
    <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>

    <!-- Normal button group -->
    <div class="btn-group" role="group" aria-label="...">...</div>

    <!-- Small button group -->
    <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

#### Vertical

    <!-- Vertical button group -->
    <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
      <button type="button" class="btn btn-outline-secondary">Button</button>
      <button type="button" class="btn btn-outline-secondary">Button</button>
      <button type="button" class="btn btn-outline-secondary">Button</button>
      <button type="button" class="btn btn-outline-secondary">Button</button>
    </div>

Top