Dropdowns
Single dropdown buttons
Outline Button Dropdowns
Rounded Button Dropdowns
Rounded Outline Dropdowns
Split buttons
Dropdown Sizing
Dropup
Dropup right
Active
Dropup left
Disabled
Auto close behavior
dropdowns with Forms
Dropdown menu centered

Use .dropdown-center on the parent element.

Dropup centered

Use .dropup-centeron the parent element.

Menu items

You can use <a> or <button> as dropdown items.

Dropdowns options

Use data-bs-offset or data-bs-reference to change the location of the dropdown.

Alignment options
Dark Dropdowns
Menu alignment
Responsive alignment end
Responsive alignment left
Custom Dropdown Menu's
Ghost Button Dropdowns
non-interactive dropdown items

Use .dropdown-item-text. to create non-interactive dropdown items.

  • Dropdown item text
    • ActionAnother actionSomething else here
    Dropdown Headers

    Add a .dropdown-header to label sections of actions in any dropdown menu.

    Dropdown header
    ActionAnother actionSomething else here
    Dropdown Dividers
    Heading
    ActionAnother actionSomething else hereSeparated link
    Dropdown Menu Text

    Some example text that's free-flowing within the dropdown menu.

    And this is more example text.