Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
ButtonLinkSplit buttonSizingDarkDirectionAlignmentResponsive alignmentButton itemsActive itemDisabled itemHeaderDividerText itemReferenceOffsetAuto close

Dropdowns

Button

<div>
  <button type="button" class="btn btn-secondary" id="dropdownButton">Dropdown button</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<div> <button type="button" class="btn btn-secondary" id="dropdownButton">Dropdown button</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div>

Link

<div>
  <a class="btn btn-secondary" href="#" id="dropdownLink">Dropdown link</a>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<div> <a class="btn btn-secondary" href="#" id="dropdownLink">Dropdown link</a> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div>

Split button

<div>
  <button type="button" class="btn btn-secondary">Dropdown split button</button>
  <button type="button" class="btn btn-secondary" id="dropdownSplit"><span>Toggle dropdown</span></button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<div> <button type="button" class="btn btn-secondary">Dropdown split button</button> <button type="button" class="btn btn-secondary" id="dropdownSplit"><span>Toggle dropdown</span></button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div>

Sizing



<div>
  <button type="button" class="btn btn-secondary" id="dropdownSmall">Small button</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<br>
<div>
  <button type="button" class="btn btn-secondary" id="dropdownMedium">Medium button</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<br>
<div>
  <button type="button" class="btn btn-secondary" id="dropdownLarge">Large button</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<div> <button type="button" class="btn btn-secondary" id="dropdownSmall">Small button</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div> <br> <div> <button type="button" class="btn btn-secondary" id="dropdownMedium">Medium button</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div> <br> <div> <button type="button" class="btn btn-secondary" id="dropdownLarge">Large button</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div>

Dark

In navbar component

<div>
  <button type="button" class="btn btn-secondary" id="dropdownDark">Dropdown dark</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<h4 class="h5 text-muted mt-3">In navbar component</h4>
<nav class="navbar navbar-dark bg-dark navbar-expand">
  <div class="container">
    <a href="#" class="navbar-brand">Navbar</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="nav-link" id="navbarDropdownDark">Dropdown dark</a>
          <ul>
            <li>
              <a href="#">First item</a>
            </li>
            <li>
              <a href="#">Second item</a>
            </li>
            <li>
              <a href="#">Third item</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div> <button type="button" class="btn btn-secondary" id="dropdownDark">Dropdown dark</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div> <h4 class="h5 text-muted mt-3">In navbar component</h4> <nav class="navbar navbar-dark bg-dark navbar-expand"> <div class="container"> <a href="#" class="navbar-brand">Navbar</a> <div class="collapse navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link" id="navbarDropdownDark">Dropdown dark</a> <ul> <li> <a href="#">First item</a> </li> <li> <a href="#">Second item</a> </li> <li> <a href="#">Third item</a> </li> </ul> </li> </ul> </div> </div> </nav>

Direction



<div>
  <button type="button" class="btn btn-secondary" id="dropup">Dropup</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<br>
<div>
  <button type="button" class="btn btn-secondary" id="dropend">Dropright</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<br>
<div>
  <button type="button" class="btn btn-secondary" id="dropstart">Dropleft</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<div> <button type="button" class="btn btn-secondary" id="dropup">Dropup</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div> <br> <div> <button type="button" class="btn btn-secondary" id="dropend">Dropright</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div> <br> <div> <button type="button" class="btn btn-secondary" id="dropstart">Dropleft</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div>

Alignment

<div>
  <button type="button" class="btn btn-secondary" id="dropdownRightAligned">Dropdown right-aligned</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<div> <button type="button" class="btn btn-secondary" id="dropdownRightAligned">Dropdown right-aligned</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div>

Responsive alignment

To right-align the dropdown menu for the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl}-end.



To left-align the dropdown menu for the given breakpoint or larger, add .dropdown-menu-end and .dropdown-menu{-sm|-md|-lg|-xl}-start.

<p>To right-align the dropdown menu for the given breakpoint or larger, add <code>.dropdown-menu{-sm|-md|-lg|-xl}-end</code>.</p>
<div>
  <button type="button" class="btn btn-secondary" id="dropdownResponsive">Dropdown responsive alignment</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<br><br>
<p>To left-align the dropdown menu for the given breakpoint or larger, add <code>.dropdown-menu-end</code> and <code>.dropdown-menu{-sm|-md|-lg|-xl}-start</code>.</p>
<div>
  <button type="button" class="btn btn-secondary" id="dropdownResponsive">Dropdown responsive alignment</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<p>To right-align the dropdown menu for the given breakpoint or larger, add <code>.dropdown-menu{-sm|-md|-lg|-xl}-end</code>.</p> <div> <button type="button" class="btn btn-secondary" id="dropdownResponsive">Dropdown responsive alignment</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div> <br><br> <p>To left-align the dropdown menu for the given breakpoint or larger, add <code>.dropdown-menu-end</code> and <code>.dropdown-menu{-sm|-md|-lg|-xl}-start</code>.</p> <div> <button type="button" class="btn btn-secondary" id="dropdownResponsive">Dropdown responsive alignment</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div>

Button items

<div>
  <button type="button" class="btn btn-secondary" id="dropdownButtonItems">Dropdown button</button>
  <div>
    <button type="button">First button</button>
    <button type="button">Second button</button>
    <button type="button">Third button</button>
  </div>
</div>
<div> <button type="button" class="btn btn-secondary" id="dropdownButtonItems">Dropdown button</button> <div> <button type="button">First button</button> <button type="button">Second button</button> <button type="button">Third button</button> </div> </div>

Active item

<div>
  <button type="button" class="btn btn-secondary" id="dropdownActive">Dropdown button</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<div> <button type="button" class="btn btn-secondary" id="dropdownActive">Dropdown button</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div>

Disabled item

<div>
  <button type="button" class="btn btn-secondary" id="dropdownDisabled">Dropdown button</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<div> <button type="button" class="btn btn-secondary" id="dropdownDisabled">Dropdown button</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div>

Header

<div>
  <button type="button" class="btn btn-secondary" id="dropdownHeader">Dropdown button</button>
  <div>
    <h6>Dropdown header</h6>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<div> <button type="button" class="btn btn-secondary" id="dropdownHeader">Dropdown button</button> <div> <h6>Dropdown header</h6> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div>

Divider

<div>
  <button type="button" class="btn btn-secondary" id="dropdownDivider">Dropdown button</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <div></div>
    <a href="#">Third item</a>
  </div>
</div>
<div> <button type="button" class="btn btn-secondary" id="dropdownDivider">Dropdown button</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <div></div> <a href="#">Third item</a> </div> </div>

Text item

Dropdown text item Second item Third item 
<div>
  <button type="button" class="btn btn-secondary" id="dropdownText">Dropdown button</button>
  <div>
    <span>Dropdown text item</span>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<div> <button type="button" class="btn btn-secondary" id="dropdownText">Dropdown button</button> <div> <span>Dropdown text item</span> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div>

Reference

<div>
  <button type="button" class="btn btn-secondary">Dropdown split button</button>
  <button type="button" class="btn btn-secondary" id="dropdownReference"><span>Toggle dropdown</span></button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<div> <button type="button" class="btn btn-secondary">Dropdown split button</button> <button type="button" class="btn btn-secondary" id="dropdownReference"><span>Toggle dropdown</span></button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div>

Offset

<div>
  <button type="button" class="btn btn-secondary" id="dropdownOffset">Dropdown button</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<div> <button type="button" class="btn btn-secondary" id="dropdownOffset">Dropdown button</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div>

Auto close




<div>
  <button type="button" class="btn btn-secondary" id="dropdownAutocloseDefault">Default</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<br>
<div>
  <button type="button" class="btn btn-secondary" id="dropdownAutocloseInside">Auto close inside</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<br>
<div>
  <button type="button" class="btn btn-secondary" id="dropdownAutocloseOutside">Auto close outside</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<br>
<div>
  <button type="button" class="btn btn-secondary" id="dropdownAutocloseManual">Manual close</button>
  <div>
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
  </div>
</div>
<div> <button type="button" class="btn btn-secondary" id="dropdownAutocloseDefault">Default</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div> <br> <div> <button type="button" class="btn btn-secondary" id="dropdownAutocloseInside">Auto close inside</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div> <br> <div> <button type="button" class="btn btn-secondary" id="dropdownAutocloseOutside">Auto close outside</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div> <br> <div> <button type="button" class="btn btn-secondary" id="dropdownAutocloseManual">Manual close</button> <div> <a href="#">First item</a> <a href="#">Second item</a> <a href="#">Third item</a> </div> </div>