Bootstrap provides a way to create dropdown buttons group in a single line. Usually <div>
element is used for dropdown button group creation. Find below list of classes provided by Bootstrap which you can use for dropdown button group creations:
Class Name | Descriptions |
---|---|
.btn-group | Create button group in single line (Horizontal). |
.btn-group .dropdown-toggle | Create toggle group dropdown. |
.caret | Denote that the button is a dropdown. |
.btn-group dropup | Create toggle group dropup dropdown. |
Syntax
<div class="btn-group"> <button type="button" class="btn btn-primary">Scripts</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Javascript</a></li> <li><a href="#">AngularJS</a></li> </ul> </div>
The following example shows single button dropdown:
<div class="page-header"> <h2>Single Button Dropdown</h2> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">AngularJS <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Filters</a></li> <li><a href="#">Scope</a></li> <li><a href="#">Directive</a></li> <li class="divider"></li> <li><a href="#">Services</a></li> </ul> </div>See live Example
The above buttons group example will produce below output:
The following example shows split button dropdown:
<div class="btn-group"> <button type="button" class="btn btn-primary">JavaScript</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">JSON Object</a></li> <li><a href="#">String Object</a></li> <li><a href="#">Date Object</a></li> <li class="divider"></li> <li><a href="#">RegExp</a></li> </ul> </div>See Live Example
The above buttons group example will produce below output:
The following example shows button group dropup dropdown:
<div class="btn-group dropup"> <button type="button" class="btn btn-primary">JavaScript</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">JSON Object</a></li> <li><a href="#">String Object</a></li> <li><a href="#">Date Object</a></li> <li class="divider"></li> <li><a href="#">RegExp</a></li> </ul> </div>See Live Example
The above buttons group example will produce below output: