English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap Basic Tutorial

Bootstrap plugin

Bootstrap Button Dropdown Menu

This chapter will explain how to add a dropdown menu to a button using Bootstrap classes. To add a dropdown menu to a button, simply add a .btn-group Place the button and dropdown menu in the container. You can also use <span></span> to indicate that the button is a dropdown menu.

The following example demonstrates a basic simple button dropdown menu:

Online Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Basic button 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="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle"　
			data-toggle="dropdown">
		Default <span class="caret"></span>
	</button>
	<ul class="dropdown">-menu" role="menu">
		<li><a href="#">Feature</a></li>
		<li><a href="#">Another Feature</a></li>
		<li><a href="#">Other</a></li>
		<li class="divider"></li>
		<li><a href="#">Separate Link</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Original　
		<span class="caret"></span>
	</button>
	<ul class="dropdown">-menu" role="menu">
		<li><a href="#">Feature</a></li>
		<li><a href="#">Another Feature</a></li>
		<li><a href="#">Other</a></li>
		<li class="divider"></li>
		<li><a href="#">Separate Link</a></li>
	</ul>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Split button dropdown menu

The split button dropdown menu uses a style similar to the dropdown button, but adds the original functionality. The left side of the split button is the original functionality, and the right side is the toggle to display the dropdown menu.

Online Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Split button 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="btn-group">
	<button type="button" class="btn btn-default">Default</button>
	<button type="button" class="btn btn-default dropdown-toggle"　
			data-toggle="dropdown">
		<span class="caret"></span>
		<span class="sr-only">Toggle dropdown menu</span>
	</button>
	<ul class="dropdown">-menu" role="menu">
		<li><a href="#">Feature</a></li>
		<li><a href="#">Another Feature</a></li>
		<li><a href="#">Other</a></li>
		<li class="divider"></li>
		<li><a href="#">Separate Link</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary">Original</button>
	<button type="button" class="btn btn-primary dropdown-toggle"　
			data-toggle="dropdown">
		<span class="caret"></span>
		<span class="sr-only">Toggle dropdown menu</span>
	</button>
	<ul class="dropdown">-menu" role="menu">
		<li><a href="#">Feature</a></li>
		<li><a href="#">Another Feature</a></li>
		<li><a href="#">Other</a></li>
		<li class="divider"></li>
		<li><a href="#">Separate Link</a></li>
	</ul>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

The size of the button pull-down menu

You can use dropdown menus with buttons of various sizes:.btn-lg, .btn-sm or .btn-xs。

Online Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　The size of the button pull-down 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="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle btn-lg"　
			data-toggle="dropdown">
		Default <span class="caret"></span>
	</button>
	<ul class="dropdown">-menu" role="menu">
		<li><a href="#">Feature</a></li>
		<li><a href="#">Another Feature</a></li>
		<li><a href="#">Other</a></li>
		<li class="divider"></li>
		<li><a href="#">Separate Link</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary dropdown-toggle btn-sm"　
			data-toggle="dropdown">
		Original <span class="caret"></span>
	</button>
	<ul class="dropdown">-menu" role="menu">
		<li><a href="#">Feature</a></li>
		<li><a href="#">Another Feature</a></li>
		<li><a href="#">Other</a></li>
		<li class="divider"></li>
		<li><a href="#">Separate Link</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-success dropdown-toggle btn-xs"　
			data-toggle="dropdown">
		Success <span class="caret"></span>
	</button>
	<ul class="dropdown">-menu" role="menu">
		<li><a href="#">Feature</a></li>
		<li><a href="#">Another Feature</a></li>
		<li><a href="#">Other</a></li>
		<li class="divider"></li>
		<li><a href="#">Separate Link</a></li>
	</ul>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Pull-down menu on button

Menu can also be stretched upwards, just need to simply towards the parent .btn-group container add .dropup just do it.

Online Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　<title>Bootstrap Example　-　Pull-down menu on button</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="row" style="margin-left:50px; margin-top:200px">
	<div class="btn-group dropup">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default　
			<span class="caret"></span>
		</button>
		<ul class="dropdown">-menu" role="menu">
			<li><a href="#">Feature</a></li>
			<li><a href="#">Another Feature</a></li>
			<li><a href="#">Other</a></li>
			<li class="divider"></li>
			<li><a href="#">Separate Link</a></li>
		</ul>
	</div>
	<div class="btn-group dropup">
		<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Original　
			<span class="caret"></span>
		</button>
		<ul class="dropdown">-menu" role="menu">
			<li><a href="#">Feature</a></li>
			<li><a href="#">Another Feature</a></li>
			<li><a href="#">Other</a></li>
			<li class="divider"></li>
			<li><a href="#">Separate Link</a></li>
		</ul>
	</div>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Bootstrap Input GroupsBootstrap Button Groups