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:
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.