Add .active to item in the dropdown to style them as active.

• Regular link
• Active link
• Another link

Add .disabled to items in the dropdown to style them as disabled.

• Regular link
• Active link
• Another link

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.