Bootstrap Dropdown Button Group

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 NameDescriptions
.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>

Bootstrap Single Button Dropdown Example

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:

Bootstrap Split Button DropDown Example

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:

Bootstrap Buttons Group DropUp DropDown Example

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: