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

<!DOCTYPE html>
<html lang="en-US">
<HEAD>
<TITLE>Bootstrap Button Style Example Demo</TITLE>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
</head>
<body>
<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>
</body>
</html>

Bootstrap Single Button Dropdown Example

The following example shows single button dropdown:

<!DOCTYPE html>
<html lang="en-US">
<HEAD>
<TITLE>Bootstrap Button Style Example Demo</TITLE>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
</head>
<body>
<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>
 </body>
</html>

See live Example

The above buttons group example will produce below output:

Bootstrap Split Button DropDown Example

The following example shows split button dropdown:

<!DOCTYPE html>
<html lang="en-US">
<HEAD>
<TITLE>Bootstrap Button Style Example Demo</TITLE>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
</head>
<body>
<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>
 </body>
</html>

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:

<!DOCTYPE html>
<html lang="en-US">
<HEAD>
<TITLE>Bootstrap Button Style Example Demo</TITLE>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
</head>
<body>
<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>
 </body>
</html>

See Live Example

The above buttons group example will produce below output:

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles