Button Groupsv5.x

---- Standard list --------
<div class="btn-group me-3">
   <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 list --------
<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> 
---- Checkboxes --------
<div class="btn-group me-3" 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>
</div>
---- Radio button list --------
<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>
</div> 
---- Button sizes --------
<div class="btn-group btn-group-lg mb-3" 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>
<div class="btn-group mb-3" 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>
<div class="btn-group btn-group-sm mb-3" 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>
---- Nested Buttons --------
<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 --------
<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>
   <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 class="btn-group dropstart" role="group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
         Dropleft (start)
      </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">
         Dropright (end)
      </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">
         Dropup
      </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>