<section class="py-7 mt-3">
  <div class="container">
    <div class="row justify-space-between text-center py-2">
      <div class="col-6 mx-auto">
        <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>
      </div>
    </div>
  </div>
</section>

<section class="py-7 mt-3">
  <div class="container">
    <div class="row justify-space-between text-center py-2">
      <div class="col-6 mx-auto">
        <div class="btn-group" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-outline-dark">Left</button>
          <button type="button" class="btn btn-outline-dark">Middle</button>
          <button type="button" class="btn btn-outline-dark">Right</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-7 mt-3">
  <div class="container">
    <div class="row justify-space-between text-center py-2">
      <div class="col-6 mx-auto">
        <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-dark" for="btncheck1">Checkbox 1</label>

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

          <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
          <label class="btn btn-outline-dark" for="btncheck3">Checkbox 3</label>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-7 mt-3">
  <div class="container">
    <div class="row justify-space-between text-center py-2">
      <div class="col-6 mx-auto">
        <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-dark" for="btnradio1">Radio 1</label>

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

          <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
          <label class="btn btn-outline-dark" for="btnradio3">Radio 3</label>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-6 mt-2">
  <div class="container">
    <div class="row justify-space-between py-2">
      <div class="col-6 mx-auto">
        <div class="btn-group btn-group-lg" 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>

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

        <div class="btn-group btn-group-sm" 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>
      </div>
    </div>
  </div>
</section>