Bootstrap Button Dropdowns

June 20, 2014 // by Sutha Kaliannan

This tutorial explains about adding dropdown menu to buttons in the Bootstrap. We can create dropdown menu with different types of buttons simply by using .btn-group in dropdown menu. The following example shows how to add dropdown to buttons.

also read:

Bootstrap Setup

Bootstrap CSS

Introduction to Foundation

HTML5 Tutorials

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdown Menu with different buttons</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Country List<span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Country List<span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Country List<span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Country List<span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Country List<span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
</div>
</body>
</html>

Run Bootstrap Dropdown Buttons Demo

Bootstrap Splitting Dropdown Menu Buttons

It is also possible to add dropdown list to split buttons. The following example shows how to split dropdown buttons with some markup changes:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Splitting Dropdown Menu Buttons</h2>
<div class="btn-group">
<button class="btn">Country List</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
<div class="btn-group">
<button class="btn">Country List</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
<div class="btn-group">
<button class="btn">Country List</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
<div class="btn-group">
<button class="btn">Country List</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
<div class="btn-group">
<button class="btn">Country List</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
<div class="btn-group">
<button class="btn">Country List</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
</div>
</body>
</html>

Run Bootstrap Split Dropdown Button Demo

Bootstrap Sizing Dropdown Button

We can make dropdown button with any sizes such as larger size, smaller size and extra small size by using .btn-lg, .btn-sm and .btn-xs classes.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Sizing Dropdown Menu Buttons</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-lg" data-toggle="dropdown">Country List<span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown">Country List<span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle btn-xs" data-toggle="dropdown">Country List<span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
</div>
</body>
</html>

Run Bootstrap Sizing Dropdown Button Demo

Bootstrap Dropdown Variation

It’s possible to make dropdown menu to up rather than down. We can drop up the options list by adding .dropup class to the parent .btn-group container. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="margin-top:150px">
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle btn-lg" data-toggle="dropdown">Country List<span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown">Country List<span class="caret"></span></button>
   <ul class="dropdown-menu">
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
</div>
</body>
</html>

Run Bootstrap Dropdown Variation Demo

About Sutha Kaliannan

Bootstrap Dropdowns

Bootstrap Button Groups