# 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.

     <!--Basic gruop-->
      <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>

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

## Basic example

Active link Link Link

    <!--Button gruop-->
      <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>

## Mixed style

     <!--Mixed btn gruop-->
      <div class="btn-group" role="group" aria-label="Basic mixed styles example">
        <button type="button" class="btn btn-danger">Left</button>
        <button type="button" class="btn btn-warning">Middle</button>
        <button type="button" class="btn btn-success">Right</button>
      </div>

## Outline style

    <!--Outline btn gruop-->
      <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

Checkbox 1 Checkbox 2 Checkbox 3

    <!--Checkbox and radio-->
      <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>

## Radio

Radio 1 Radio 2 Radio 3

    <!--Checkbox and radio-->
        <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>

## Sizing

    <!--Button size-->
      <div class="btn-group btn-group-lg mb-2" 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 mb-2" 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 mb-2" 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>