# Dropdowns

###### Dropdowns Basic

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:

And with `<a>` elements:

Dropdown link

###### Dropdowns Sizing

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

###### Dropdown Basic with Color

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

###### Dropdown Split Button with Color

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.

We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.

###### Dropdown with Directions

###### Dropup

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

###### Dropright

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

###### Dropleft

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

###### Dropdown with Menu Contents

###### Header

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

###### Dividers

Separate groups of related menu items with a divider.

For more documentations you can visit bootstrap dropdowns documentations.

##### Ohh No!

Are you sure you want to logout?