Online Tools

Bootstrap Basic Tutorial

Bootstrap Button Groups Bootstrap Glyphicons

Bootstrap Dropdown Menu

Bootstrap plugins This chapter will focus on Bootstrap dropdown menus. Dropdown menus are toggleable context menus displayed in list format. This can be achieved by using Dropdown menu (Dropdown) JavaScript plugin

to interact with it. .dropdown If you want to use the dropdown menu, you just need to add the class

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Add a dropdown menu inside. The following example demonstrates the basic dropdown menu:/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</head>
<body>
<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"　
			data-toggle="dropdown">
		Topic
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Data mining</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Data communication/Network</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">A separate link</a>
		</li>
	</ul>
</div>
</body>
</html>

Test to see ‹/›

The results are as follows:

Dropdown menu (Dropdown)<

Options

By aligning .dropdown-menu Add class .pull-right Align dropdown menu to the right. The following example demonstrates this:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Align dropdown menu to the right</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</head>
<body>
<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"　
			data-toggle="dropdown">Topic
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu pull-right" role="menu"　
		aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Data mining</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Data communication/Network</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">A separate link</a>
		</li>
	</ul>
</div>
</body>
</html>

Test to see ‹/›

The results are as follows:

Title

You can use the class dropdown-header Add a title to the label area of the dropdown menu. The following example demonstrates this:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Dropdown menu title</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</head>
<body>
<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"　
			data-toggle="dropdown">
		Topic
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation" class="dropdown-header">Dropdown menu title</li>
		<li role="presentation" >
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Data mining</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">
				Data communication/Network
			</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation" class="dropdown-header">Dropdown menu title</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">A separate link</a>
		</li>
	</ul>
</div>
</body>
</html>

Test to see ‹/›

The results are as follows:

More Examples

Class	Description	Example
.dropdown	Specify the Dropdown, All Dropdowns Are Wrapped in .dropdown	Try It
.dropdown-menu	Create a Dropdown Menu	Try It
.dropdown-menu-right	Align Dropdown Menu to the Right	Try It
.dropdown-header	Add a Title to Dropdown Menu	Try It
.dropup	Specify Dropdowns That Pop Up Upward	Try It
.disabled	Disabled Items in Dropdown Menu	Try It
.divider	Separator in Dropdown Menu	Try It

Bootstrap Button Groups Bootstrap Glyphicons