Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
DefaultStatesOutlinedLinksToolbarSizingNestingVertical

Button group

Default

<div class="btn-group" role="group" aria-label="Default button group">
  <button type="button" class="btn btn-secondary">Home</button>
  <button type="button" class="btn btn-secondary">Profile</button>
  <button type="button" class="btn btn-secondary">Settings</button>
</div>
<div class="btn-group" role="group" aria-label="Default button group"> <button type="button" class="btn btn-secondary">Home</button> <button type="button" class="btn btn-secondary">Profile</button> <button type="button" class="btn btn-secondary">Settings</button> </div>

States

<div class="btn-group" role="group" aria-label="Default button group">
  <button type="button" class="btn btn-secondary active">Home</button>
  <button type="button" class="btn btn-secondary">Profile</button>
  <button type="button" class="btn btn-secondary" disabled="">Settings</button>
</div>
<div class="btn-group" role="group" aria-label="Default button group"> <button type="button" class="btn btn-secondary active">Home</button> <button type="button" class="btn btn-secondary">Profile</button> <button type="button" class="btn btn-secondary" disabled="">Settings</button> </div>

Outlined

<div class="btn-group" role="group" aria-label="Default button group">
  <button type="button" class="btn btn-outline-secondary">Home</button>
  <button type="button" class="btn btn-outline-secondary">Profile</button>
  <button type="button" class="btn btn-outline-secondary">Settings</button>
</div>
<div class="btn-group" role="group" aria-label="Default button group"> <button type="button" class="btn btn-outline-secondary">Home</button> <button type="button" class="btn btn-outline-secondary">Profile</button> <button type="button" class="btn btn-outline-secondary">Settings</button> </div>

Links

Home Profile Settings 
<div class="btn-group" role="group" aria-label="Default button group">
  <a href="#" class="btn btn-secondary">Home</a>
  <a href="#" class="btn btn-secondary">Profile</a>
  <a href="#" class="btn btn-secondary">Settings</a>
</div>
<div class="btn-group" role="group" aria-label="Default button group"> <a href="#" class="btn btn-secondary">Home</a> <a href="#" class="btn btn-secondary">Profile</a> <a href="#" class="btn btn-secondary">Settings</a> </div>

Toolbar

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

Sizing

<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
  <button type="button" class="btn btn-secondary">Home</button>
  <button type="button" class="btn btn-secondary">Profile</button>
  <button type="button" class="btn btn-secondary">Settings</button>
</div>
<div class="btn-group" role="group" aria-label="Default button group">
  <button type="button" class="btn btn-secondary">Home</button>
  <button type="button" class="btn btn-secondary">Profile</button>
  <button type="button" class="btn btn-secondary">Settings</button>
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  <button type="button" class="btn btn-secondary">Home</button>
  <button type="button" class="btn btn-secondary">Profile</button>
  <button type="button" class="btn btn-secondary">Settings</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> <button type="button" class="btn btn-secondary">Home</button> <button type="button" class="btn btn-secondary">Profile</button> <button type="button" class="btn btn-secondary">Settings</button> </div> <div class="btn-group" role="group" aria-label="Default button group"> <button type="button" class="btn btn-secondary">Home</button> <button type="button" class="btn btn-secondary">Profile</button> <button type="button" class="btn btn-secondary">Settings</button> </div> <div class="btn-group btn-group-lg" role="group" aria-label="Large button group"> <button type="button" class="btn btn-secondary">Home</button> <button type="button" class="btn btn-secondary">Profile</button> <button type="button" class="btn btn-secondary">Settings</button> </div>

Nesting

Dropdown link Dropdown link 
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">Home</button>
  <button type="button" class="btn btn-secondary">Profile</button>
  <div class="btn-group" role="group">
    <button id="btnGroupNesting" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Settings</button>
    <div class="dropdown-menu" aria-labelledby="btnGroupNesting">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">Home</button> <button type="button" class="btn btn-secondary">Profile</button> <div class="btn-group" role="group"> <button id="btnGroupNesting" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Settings</button> <div class="dropdown-menu" aria-labelledby="btnGroupNesting"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div> </div> </div>

Vertical

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-secondary">Home</button>
  <button type="button" class="btn btn-secondary">Profile</button>
  <button type="button" class="btn btn-secondary">Settings</button>
</div>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group"> <button type="button" class="btn btn-secondary">Home</button> <button type="button" class="btn btn-secondary">Profile</button> <button type="button" class="btn btn-secondary">Settings</button> </div>