Add .active to item in the dropdown to style them as
active.
Add .disabled to items in the dropdown to style them as
disabled.
Use .dropdown-center on the parent element.
Use .dropup-center on the parent element.
You can use <a> or <button> as
dropdown items.
Use data-bs-offset or data-bs-reference to
change the location of the dropdown.
You can use the autoClose option to change this behavior of the dropdown.
Put a form within a dropdown menu, or make it into a dropdown menu
Add .dropdown-menu-end to a .dropdown-menu to right align the dropdown
menu.
To align right the dropdown menu with the given breakpoint or
larger, add .dropdown-menu{{'{'}}-sm|-md|-lg|-xl|-xxl{{'}'}}-end.
To align left the dropdown menu with the given breakpoint or
larger, add .dropdown-menu-end and
.dropdown-menu{{'{'}}-sm|-md|-lg|-xl|-xxl{{'}'}}-start.
Any single .btn can be turned into a dropdown toggle with some markup changes.
Here’s how you can put them to work with either <button> elements:
Trigger dropdown menus above elements by adding .dropup to the
parent element.
Trigger dropdown menus at the right of the elements by adding
.dropleft to the parent element.
Add a header to label sections of actions in any dropdown menu.
Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.