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

First item Second item Third item 
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownButton" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
  <div class="dropdown-menu" aria-labelledby="dropdownButton">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownButton" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button> <div class="dropdown-menu" aria-labelledby="dropdownButton"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div>

Link

First item Second item Third item 
<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" id="dropdownLink" data-bs-toggle="dropdown" aria-expanded="false">Dropdown link</a>
  <div class="dropdown-menu" aria-labelledby="dropdownLink">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<div class="dropdown"> <a class="btn btn-secondary dropdown-toggle" href="#" id="dropdownLink" data-bs-toggle="dropdown" aria-expanded="false">Dropdown link</a> <div class="dropdown-menu" aria-labelledby="dropdownLink"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div>

Split button

First item Second item Third item 
<div class="btn-group">
  <button type="button" class="btn btn-secondary">Dropdown split button</button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownSplit" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle dropdown</span></button>
  <div class="dropdown-menu" aria-labelledby="dropdownSplit">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<div class="btn-group"> <button type="button" class="btn btn-secondary">Dropdown split button</button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownSplit" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle dropdown</span></button> <div class="dropdown-menu" aria-labelledby="dropdownSplit"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div>

Sizing

First item Second item Third item

First item Second item Third item

First item Second item Third item 
<div class="dropdown">
  <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" id="dropdownSmall" data-bs-toggle="dropdown" aria-expanded="false">Small button</button>
  <div class="dropdown-menu" aria-labelledby="dropdownSmall">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<br>
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMedium" data-bs-toggle="dropdown" aria-expanded="false">Medium button</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMedium">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<br>
<div class="dropdown">
  <button type="button" class="btn btn-secondary btn-lg dropdown-toggle" id="dropdownLarge" data-bs-toggle="dropdown" aria-expanded="false">Large button</button>
  <div class="dropdown-menu" aria-labelledby="dropdownLarge">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<div class="dropdown"> <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" id="dropdownSmall" data-bs-toggle="dropdown" aria-expanded="false">Small button</button> <div class="dropdown-menu" aria-labelledby="dropdownSmall"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div> <br> <div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMedium" data-bs-toggle="dropdown" aria-expanded="false">Medium button</button> <div class="dropdown-menu" aria-labelledby="dropdownMedium"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div> <br> <div class="dropdown"> <button type="button" class="btn btn-secondary btn-lg dropdown-toggle" id="dropdownLarge" data-bs-toggle="dropdown" aria-expanded="false">Large button</button> <div class="dropdown-menu" aria-labelledby="dropdownLarge"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div>

Dark

First item Second item Third item

In navbar component

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownDark" data-bs-toggle="dropdown" aria-expanded="false">Dropdown dark</button>
  <div class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownDark">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">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 dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownDark" data-bs-toggle="dropdown" role="button" aria-expanded="false">Dropdown dark</a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdownDark">
            <li>
              <a href="#" class="dropdown-item">First item</a>
            </li>
            <li>
              <a href="#" class="dropdown-item">Second item</a>
            </li>
            <li>
              <a href="#" class="dropdown-item">Third item</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownDark" data-bs-toggle="dropdown" aria-expanded="false">Dropdown dark</button> <div class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownDark"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">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 dropdown"> <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownDark" data-bs-toggle="dropdown" role="button" aria-expanded="false">Dropdown dark</a> <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdownDark"> <li> <a href="#" class="dropdown-item">First item</a> </li> <li> <a href="#" class="dropdown-item">Second item</a> </li> <li> <a href="#" class="dropdown-item">Third item</a> </li> </ul> </li> </ul> </div> </div> </nav>

Direction

First item Second item Third item


First item Second item Third item


First item Second item Third item 
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropup" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button>
  <div class="dropdown-menu" aria-labelledby="dropup">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<br><br>
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropend" data-bs-toggle="dropdown" aria-expanded="false">Dropright</button>
  <div class="dropdown-menu" aria-labelledby="dropend">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<br><br>
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropstart" data-bs-toggle="dropdown" aria-expanded="false">Dropleft</button>
  <div class="dropdown-menu" aria-labelledby="dropstart">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<div class="btn-group dropup"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropup" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button> <div class="dropdown-menu" aria-labelledby="dropup"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div> <br><br> <div class="btn-group dropend"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropend" data-bs-toggle="dropdown" aria-expanded="false">Dropright</button> <div class="dropdown-menu" aria-labelledby="dropend"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div> <br><br> <div class="btn-group dropstart"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropstart" data-bs-toggle="dropdown" aria-expanded="false">Dropleft</button> <div class="dropdown-menu" aria-labelledby="dropstart"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div>

Alignment

First item Second item Third item 
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownEndAligned" data-bs-toggle="dropdown" aria-expanded="false">Dropdown right-aligned</button>
  <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownEndAligned">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownEndAligned" data-bs-toggle="dropdown" aria-expanded="false">Dropdown right-aligned</button> <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownEndAligned"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">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.

First item Second item Third item


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

First item Second item Third item 
<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 class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownResponsive" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">Dropdown responsive alignment</button>
  <div class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownResponsive">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">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}-right</code>.</p>
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownResponsive" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">Dropdown responsive alignment</button>
  <div class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start" aria-labelledby="dropdownResponsive">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">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 class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownResponsive" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">Dropdown responsive alignment</button> <div class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownResponsive"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">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}-right</code>.</p> <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownResponsive" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">Dropdown responsive alignment</button> <div class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start" aria-labelledby="dropdownResponsive"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div>

Button items

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownButtonItems" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
  <div class="dropdown-menu" aria-labelledby="dropdownButtonItems">
    <button type="button" class="dropdown-item">First button</button>
    <button type="button" class="dropdown-item">Second button</button>
    <button type="button" class="dropdown-item">Third button</button>
  </div>
</div>
<div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownButtonItems" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button> <div class="dropdown-menu" aria-labelledby="dropdownButtonItems"> <button type="button" class="dropdown-item">First button</button> <button type="button" class="dropdown-item">Second button</button> <button type="button" class="dropdown-item">Third button</button> </div> </div>

Active item

First item Second item Third item 
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownActive" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
  <div class="dropdown-menu" aria-labelledby="dropdownActive">
    <a href="#" class="dropdown-item active">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownActive" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button> <div class="dropdown-menu" aria-labelledby="dropdownActive"> <a href="#" class="dropdown-item active">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div>

Disabled item

First item Second item Third item 
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownDisabled" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
  <div class="dropdown-menu" aria-labelledby="dropdownDisabled">
    <a href="#" class="dropdown-item disabled">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownDisabled" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button> <div class="dropdown-menu" aria-labelledby="dropdownDisabled"> <a href="#" class="dropdown-item disabled">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div>

Header

Dropdown header
First item Second item Third item 
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownHeader" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
  <div class="dropdown-menu" aria-labelledby="dropdownHeader">
    <h6 class="dropdown-header">Dropdown header</h6>
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownHeader" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button> <div class="dropdown-menu" aria-labelledby="dropdownHeader"> <h6 class="dropdown-header">Dropdown header</h6> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div>

Divider

First item Second item
Third item 
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownDivider" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
  <div class="dropdown-menu" aria-labelledby="dropdownDivider">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownDivider" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button> <div class="dropdown-menu" aria-labelledby="dropdownDivider"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">Third item</a> </div> </div>

Text item

Dropdown text item Second item Third item 
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownText" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
  <div class="dropdown-menu" aria-labelledby="dropdownText">
    <span class="dropdown-item-text">Dropdown text item</span>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownText" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button> <div class="dropdown-menu" aria-labelledby="dropdownText"> <span class="dropdown-item-text">Dropdown text item</span> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div>

Reference

First item Second item Third item 
<div class="btn-group">
  <button type="button" class="btn btn-secondary">Dropdown split button</button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent"><span class="visually-hidden">Toggle dropdown</span></button>
  <div class="dropdown-menu" aria-labelledby="dropdownReference">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<div class="btn-group"> <button type="button" class="btn btn-secondary">Dropdown split button</button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent"><span class="visually-hidden">Toggle dropdown</span></button> <div class="dropdown-menu" aria-labelledby="dropdownReference"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div>

Offset

First item Second item Third item 
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="30,10">Dropdown button</button>
  <div class="dropdown-menu" aria-labelledby="dropdownOffset">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="30,10">Dropdown button</button> <div class="dropdown-menu" aria-labelledby="dropdownOffset"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div>

Auto close

First item Second item Third item

First item Second item Third item

First item Second item Third item

First item Second item Third item 
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownAutocloseDefault" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">Default</button>
  <div class="dropdown-menu" aria-labelledby="dropdownAutocloseDefault">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<br>
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownAutocloseInside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">Auto close inside</button>
  <div class="dropdown-menu" aria-labelledby="dropdownAutocloseInside">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<br>
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownAutocloseOutside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Auto close outside</button>
  <div class="dropdown-menu" aria-labelledby="dropdownAutocloseOutside">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<br>
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownAutocloseManual" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">Manual close</button>
  <div class="dropdown-menu" aria-labelledby="dropdownAutocloseManual">
    <a href="#" class="dropdown-item">First item</a>
    <a href="#" class="dropdown-item">Second item</a>
    <a href="#" class="dropdown-item">Third item</a>
  </div>
</div>
<div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownAutocloseDefault" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">Default</button> <div class="dropdown-menu" aria-labelledby="dropdownAutocloseDefault"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div> <br> <div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownAutocloseInside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">Auto close inside</button> <div class="dropdown-menu" aria-labelledby="dropdownAutocloseInside"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div> <br> <div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownAutocloseOutside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Auto close outside</button> <div class="dropdown-menu" aria-labelledby="dropdownAutocloseOutside"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div> <br> <div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownAutocloseManual" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">Manual close</button> <div class="dropdown-menu" aria-labelledby="dropdownAutocloseManual"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </div>