Dropdowns

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown javascript plugin. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Basic Example

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position relative. Dropdowns can be triggered from link or button elements to better fit your potential needs.

Action Another action Something else here

Dropdown variations

Add class .btn-* for solid colored buttons.

Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here

Split button

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.

Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

Dropup

Trigger dropdown menus above elements by adding .dropup to the parent element.

Action Another action Something else here
Action Another action Something else here

Dropright

Trigger dropdown menus at the right of the elements by adding .dropright to the parent element.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Dropleft

Trigger dropdown menus at the right of the elements by adding .dropleft to the parent element.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Active menu item

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

Action Another action Something else here

disabled menu item

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

Action Another action Something else here

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

Dropdown header
Action Another action Something else here

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

Action Another action Something else here
Separated link

Text in dropdown

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.

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

And this is more example text.

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.