Single Button Dropdown

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:

Sizing

Add .btn.btn-sm && .btn.btn-lg for additional sizes.

Color Variant

The best part is you can do this with any button variant, too:

Roundend Button Drowndown

Use any of the available .btn-rounded classes quickly create a styled button.

Split button

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

Split Roundend Button Drowndown

Use any of the available .btn-rounded classes quickly create a styled button.
 

Outline Button Dropdown

Use any of the available .btn-outline-* classes quickly create a styled button.

Outline Split Button Dropdown

Use any of the available .btn-outline-* classes quickly create a styled button.

Dropdown Alignment options

Taking most of the options shown above, here’s a small kitchen sink demo of various dropdown alignment options in one place. Add .btn-group with .dropstart , .dropup , .dropend .

Dropdown Content

Dropdown menu ex:- Header, Divider, Form, Text.
 

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

And this is more example text.

New around here? Sign upForgot password?

Dark Dropdown

Opt into darker dropdowns to match a dark navbar or custom style by adding.dropdown-menu-dark onto an existing .dropdown-menu.  No changes are required to the dropdown items.

Icon Dropdown

Use any of the available .icon-Btn classes quickly create a styled button.