Bootstrap Button Dropdowns

We will cover topic about how to add drop down menu to buttons using Bootstrap classes in this tutorials. Adding a dropdown to button very simple, wrap the entire button and dropdown menu in the class .btn-group. Also use <span class="caret"></span> to act as an indicator that the button is a dropdown. Below mentioned code of example shows a basic single button dropdowns:

<div class="btn-group">
 <button type="button" class="btn btn-default dropdown-toggle" 
 data-toggle="dropdown">
 Default <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>
<div class="btn-group">
 <button type="button" class="btn btn-primary dropdown-toggle" 
 data-toggle="dropdown">
 Primary <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>

Demo

Split Button Dropdowns

Split button dropdowns with the same general style as the separate button but add along with the dropdown. Split buttons have the key action on the left and a toggle on the right that shows the dropdown.

<div class="btn-group">
 <button type="button" class="btn btn-default">Default</button>
 <button type="button" class="btn btn-default dropdown-toggle" 
 data-toggle="dropdown">
 <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>
<div class="btn-group">
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-primary dropdown-toggle" 
 data-toggle="dropdown">
 <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>

Demo

Button Dropdown Size

You can use the dropdowns with different button size by using these classes .btn-large, .btn-sm, or .btn-xs.

<div class="btn-group">
 <button type="button" class="btn btn-default dropdown-toggle btn-lg" 
 data-toggle="dropdown">
 Default <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>
<div class="btn-group">
 <button type="button" class="btn btn-primary dropdown-toggle btn-sm" 
 data-toggle="dropdown">
 Primary <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>
<div class="btn-group">
 <button type="button" class="btn btn-success dropdown-toggle btn-xs" 
 data-toggle="dropdown">
 Success <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>

Demo

Dropup variation

Default behavior of menu is dropdown but if you want to build menu that drop up. Then simply use .dropup class to the parent .btn-group containter.

<div class="row" style="margin-left:50px; margin-top:200px">
 <div class="btn-group dropup">
 <button type="button" class="btn btn-default dropdown-toggle" 
 data-toggle="dropdown">
 Default <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>
 <div class="btn-group dropup">
 <button type="button" class="btn btn-primary dropdown-toggle" 
 data-toggle="dropdown">
 Primary <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>
</div>

Demo

Bootstrap Button Dropdowns