bootstrap/docs/components/button-dropdown.md

Button dropdowns

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Plugin dependency

Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.

Single button dropdowns

Turn a button into a dropdown toggle with some basic markup changes.

Default

• Action
• Another action
• Something else here
• Separated link

Primary

• Action
• Another action
• Something else here
• Separated link

Success

• Action
• Another action
• Something else here
• Separated link

Info

• Action
• Another action
• Something else here
• Separated link

Warning

• Action
• Another action
• Something else here
• Separated link

Danger

• Action
• Another action
• Something else here
• Separated link

{% highlight html %}

Action

• Action
• Another action
• Something else here
• Separated link

{% endhighlight %}

Split button dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

Default Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

Primary Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

Success Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

Info Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

Warning Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

Danger Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

{% highlight html %}

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

{% endhighlight %}

Sizing

Button dropdowns work with buttons of all sizes.

Large button

• Action
• Another action
• Something else here
• Separated link

Small button

• Action
• Another action
• Something else here
• Separated link

Extra small button

• Action
• Another action
• Something else here
• Separated link

{% highlight html %}

Large button

...

Small button

...

Extra small button

...

{% endhighlight %}

Dropup variation

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

Dropup Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

Right dropup Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

{% highlight html %}

Dropup Toggle Dropdown

{% endhighlight %}