\n
Single button dropdowns
\n
\n Any single\n .btn
can be turned into\n a dropdown toggle with some markup changes. Here’s how you can\n put them to work with either\n <button>
\n elements:\n
\n\n
\n
\n \n \n Dropdown button\n \n \n Action\n Another Action\n Something else here\n \n
\n
\n
\n
Sizing
\n
\n Button dropdowns work with buttons of all sizes, including\n default and split dropdown buttons.\n
\n\n
\n \n
\n \n \n Large button\n \n \n Action\n Another action\n Something else here\n \n \n \n Small button\n \n \n Action\n Another action\n Something else here\n \n
\n
\n
\n
\n
Dropup
\n
\n Dropdown menus can be changed to expand upwards (instead of\n downwards) by adding\n dropup
to the parent.\n
\n\n
\n \n \n Dropup\n \n \n Action\n Another action\n Something else here\n \n \n \n Dropup\n \n \n Action\n Another action\n Something else here\n \n
\n
\n
\n
Variant
\n
\n The best part is you can do this with any button variant, too:\n
\n\n
\n \n \n Primary\n \n \n Action\n Another action\n Something else here\n \n Separated link\n \n
\n \n
\n \n \n Light\n \n \n Action\n Another action\n Something else here\n \n Separated link\n \n
\n \n
\n \n \n Success\n \n \n Action\n Another action\n Something else here\n \n Separated link\n \n
\n \n
\n \n \n Info\n \n \n Action\n Another action\n Something else here\n \n Separated link\n \n
\n \n
\n \n \n Warning\n \n \n Action\n Another action\n Something else here\n \n Separated link\n \n
\n \n
\n \n \n Danger\n \n \n Action\n Another action\n Something else here\n \n Separated link\n \n
\n \n\n
\n
Drop variation
\n
\n Trigger dropdown menus at the right of the elements by\n adding\n dropleft
and dropright
to the\n parent element.\n
\n\n
\n \n \n Drop-right\n \n \n Action\n Another action\n Something else here\n \n \n \n \n Drop-left\n \n Action\n Another action\n Something else here\n \n
\n
\n