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
Dropdown Content
Dropdown menu ex:- Header, Divider, Form, Text.
-
Dropdown header
- Action
- Another action
Some example text that's free-flowing within the dropdown menu.
And this is more example text.
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.