--- layout: docs title: Button dropdown group: components --- Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper dropdown menu markup. {% callout danger %} #### Plugin dependency Button dropdowns require the [dropdown plugin]({{ site.baseurl }}/components/dropdowns/) to be included in your version of Bootstrap. {% endcallout %} ## Contents * Will be replaced with the ToC, excluding the "Contents" header {:toc} ## Single button dropdowns Turn a button into a dropdown toggle with some basic markup changes for the menu itself and the button used to trigger it.
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
{% highlight html %}
Action Another action Something else here
Separated link
{% endhighlight %} ## Split button dropdowns 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.
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
{% highlight html %}
Action Another action Something else here
Separated link
{% endhighlight %} ## Sizing Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
{% highlight html %}
...
...
...
...
{% endhighlight %} ## Dropup variation Trigger dropdown menus above elements by adding `.dropup` to the parent.
{% highlight html %}
{% endhighlight %}