Bootstrap 5 Learning Kit

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

Button group

Default

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

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

<div>
  <button type="button" class="btn btn-secondary">Home</button>
  <button type="button" class="btn btn-secondary">Profile</button>
  <div>
    <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> <button type="button" class="btn btn-secondary">Home</button> <button type="button" class="btn btn-secondary">Profile</button> <div> <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>
  <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> <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>