Bootstrap Basic Tutorial

Bootstrap Plugin

Bootstrap Button Dropdown Menu Bootstrap Dropdown Menu

Bootstrap Button Groups

Button groups allow multiple buttons to be stacked on the same line. This is very useful when you want to align buttons together. You can use Bootstrap Button (Button) Plugin Add optional JavaScript radio button and checkbox style behaviors.

The following table summarizes some important classes provided by Bootstrap for using button groups:

Class	Description	Code Example
.btn-group	This class is used to form a basic button group in .btn-group place a series of buttons with class .btn of the buttons.	<div> 　　<button　type="button">Button1</button> 　　　<button　type="button">Button2</button> </div>
.btn-toolbar	This class helps to combine several <div> elements into one <div>, usually to create more complex components.	<div　role="toolbar"> 　　<div>.../div> 　　<div>.../div> </div>
.btn-group-lg, .btn-group-, .btn-group-xs	These classes can be applied to the size adjustment of the entire button group, without the need to adjust the size of each button.	<div>.../div> <div>.../div> <div>.../div>
.btn-group-vertical	This class allows a group of buttons to be displayed vertically, instead of horizontally.	<div> 　　... </div>

Basic Button Group

The following examples demonstrate the classes discussed in the above table .btn-group Usage：

Online Example

Example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　Example　-　Basic Button Group</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">Button　1</button>
	<button　type="button"　class="btn　btn-default">Button　2</button>
	<button　type="button"　class="btn　btn-default">Button　3</button>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

Button Toolbar

The following examples demonstrate the classes discussed in the above table .btn-toolbar Usage：

Online Example

Example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　Example　-　Button Toolbar</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-toolbar"　role="toolbar">
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">Button　1</button>
		<button　type="button"　class="btn　btn-default">Button　2</button>
		<button　type="button"　class="btn　btn-default">Button　3</button>
	</div>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">Button　4</button>
		<button　type="button"　class="btn　btn-default">Button　5</button>
		<button　type="button"　class="btn　btn-default">Button　6</button>
	</div>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">Button　7</button>
		<button　type="button"　class="btn　btn-default">Button　8</button>
		<button　type="button"　class="btn　btn-default">Button　9</button>
	</div>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

Button Size

The following examples demonstrate the classes discussed in the above table .btn-group-* Usage：

Online Example

Example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　Example　-　Button Group Size</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　btn-group-lg">
	<button　type="button"　class="btn　btn-default">Button　1</button>
	<button　type="button"　class="btn　btn-default">Button　2</button>
	<button　type="button"　class="btn　btn-default">Button　3</button>
</div>
<div　class="btn-group　btn-group-sm">
	<button　type="button"　class="btn　btn-default">Button　4</button>
	<button　type="button"　class="btn　btn-default">Button　5</button>
	<button　type="button"　class="btn　btn-default">Button　6</button>
</div>
<div　class="btn-group　btn-group-xs">
	<button　type="button"　class="btn　btn-default">Button　7</button>
	<button　type="button"　class="btn　btn-default">Button　8</button>
	<button　type="button"　class="btn　btn-default">Button　9</button>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

nested

You can nest one button group inside another, that is, inside a .btn-group nested another .btn-group Use this when you want to combine a dropdown menu with a series of buttons.

Online Example

Example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">
	<title>Bootstrap　Example　-　Nested Button Group</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">Button　1</button>
	<button　type="button"　class="btn　btn-default">Button　2</button>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			Dropdown
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu>
			<li><a href="#">Dropdown Link　1</a></li>
			<li><a href="#">Dropdown Link　2</a></li>
		</ul>
　　</div>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

Vertical Button Group

The following examples demonstrate the classes discussed in the above table .btn-group-vertical Usage：

Online Example

Example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">
　　　<title>Bootstrap　Example　-　vertical　button　group</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-vertical">
	<button　type="button"　class="btn　btn-default">Button　1</button>
	<button　type="button"　class="btn　btn-default">Button　2</button>
	<div　class="btn-group-vertical">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			Dropdown
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu>
			<li><a href="#">Dropdown Link　1</a></li>
			<li><a href="#">Dropdown Link　2</a></li>
		</ul>
	</div>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

Bootstrap Button Dropdown Menu Bootstrap Dropdown Menu