Bootstrap Dropdowns

The dropdown menu is sometimes referred to as pull down menu or drop down list which appears when clicking on a button or text selection which allows the user to choose a single value. A dropdown list can be used to display large list of options where only one option is displayed initially, the remaining options will get display when user activates drop down box.

also read:

Bootstrap Setup

Bootstrap Typography

This tutorial explains how to implement the bootstrap dropdown menu using the Bootstrap framework. As we have looked at the previous bootstrap tutorials, bootstrap provides good CSS appeal for every components.

To use dropdown menu, Bootstrap provides class .dropdown which demonstrate following basic dropdown menu 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">
<h2>Basic Dropdown Menu</h2>
<ul class="nav nav-pills">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Country List<span class="caret"></span></a>
   <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>
</li>
</ul>
</body>
</html>

As shown in the above script, we just wrap the dropdown menu within the .dropdown class. Using dropdown plug-in, we have created dropdown menu by using base class navigation nav-pills. The anchor element uses dropdown-toggle class and data-toggle attribute which displays the options when user activates drop down box.

Run Bootstrap Basic Dropdown List Demo

Bootstrap Dropdown Alignment Options

By default, the dropdown menu will be positioned to the left side of its parent. If we want to position dropdown list to the right side, then we could make use of .dropdown-menu-right class. 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">
<h2>Basic Dropdown Menu</h2>
<ul class="nav nav-pills">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="mydropdown">Country List<span class="caret"></span></a>
   <ul class="dropdown-menu dropdown-menu-right" area-labelledby="mydropdown">
	<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>
</li>
</ul>
</body>
</html>

Run Bootstrap Alignment Options Demo

Bootstrap Dropdown Headers

We can add headers to particular option or multiple options in the dropdown menu by using the .dropdown-header. 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">
<h2>Headers in Dropdown Menu</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 class="dropdown-header">Countries_List1</li>
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li class="divider"></li>
	<li class="dropdown-header">Countries_List2</li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
</div>
</body>
</html>

As shown in the script, we have used .dropdown-header within dropdown-menu class. The dropdown-header contains particular heading for the list of options in the dropdown menu and the class divider is used to divide between the list of options in the dropdown menu.