Bootstrap Button Dropdowns

Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools [@ wikipedia.org].

Also see:
1. Bootstrap Various Buttons
2. Bootstrap Button Dropdowns
3. Bootstrap Button Sizing

Single button dropdowns

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

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

Usage:

<div class="btn-group">

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

Action <span class="caret"></span>

</button>

<ul class="dropdown-menu" role="menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li class="divider"></li>

<li><a href="#">Separated link</a></li>

</ul>

</div>

Split button dropdowns

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

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

Usage:

<div class="btn-group">

<button type="button" class="btn btn-danger">Action</button>

<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

<span class="caret"></span>

<span class="sr-only">Toggle Dropdown</span>

</button>

<ul class="dropdown-menu" role="menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li class="divider"></li>

<li><a href="#">Separated link</a></li>

</ul>

</div>