Bootstrap button group


Button groups allow multiple buttons to be stacked on the same line. This is useful when you want to align buttons together. You can add optional JavaScript radio and checkbox style behaviors via the Bootstrap Button plugin.

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

ClassDescriptionCode Example
.btn-groupThis class is used to form a basic button group. Place a series of buttons with class .btn in .btn-group. 
<div class="btn-group">
  <button type="button" class="btn btn-default">Button1</button>
   <button type="button" class="btn btn-default">Button2</button>
</div>
.btn-toolbarThis class helps to combine several groups<div class="btn-group"> into a <div class="btn-toolbar"> to generally get more complex components. 
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xsThese classes can be applied to Resize the entire button group without resizing each button. 
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
.btn-group-verticalThis class makes a group of buttons stack vertically instead of horizontally. 
<div class="btn-group-vertical">
  ...
</div>

Basic button group

The following example demonstrates the use of class .btn-group discussed in the table above:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example - Basic Button Group</title>
<link href="http: //libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/ 2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/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>

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的按钮组</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group">
	<button type="button" class="btn btn-default">按钮 1</button>
	<button type="button" class="btn btn-default">按钮 2</button>
	<button type="button" class="btn btn-default">按钮 3</button>
</div>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Button Toolbar

The following example demonstrates the use of class .btn-toolbar discussed in the table above:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example - Button Toolbar</title>
<link href="http://libs.baidu .com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery .min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/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>
##Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮工具栏</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/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">按钮 1</button>
		<button type="button" class="btn btn-default">按钮 2</button>
		<button type="button" class="btn btn-default">按钮 3</button>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-default">按钮 4</button>
		<button type="button" class="btn btn-default">按钮 5</button>
		<button type="button" class="btn btn-default">按钮 6</button>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-default">按钮 7</button>
		<button type="button" class="btn btn-default">按钮 8</button>
		<button type="button" class="btn btn-default">按钮 9</button>
	</div>
</div>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

Button size

The following example demonstrates the use of class .btn-group-* discussed in the table above:

< !DOCTYPE html>
<html>
<head>
<title>Bootstrap Example - Button Group Size</title>
<link href="http:// libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="http://libs.baidu.com/jquery/2.0. 0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/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>

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮组的大小</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/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>

Running Example»

Click the "Run Instance" button to view the online instance

Nesting

You can nest a button group within another button group, that is, nest a .btn-group within another .btn- group . This is used when you want to combine a drop-down menu with a series of buttons.

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example - Nested Button Group</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http: //libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script src="http://libs.baidu.com/bootstrap/3.0. 3/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> ;

                                                                                                    ">
                                                                                                                                                                                                                                                                                                 #                                                                              ;</li>
; </ul>
</div>
</div>

</body>
</html>



Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 嵌套的按钮组</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group">
	<button type="button" class="btn btn-default">按钮 1</button>
	<button type="button" class="btn btn-default">按钮 2</button>
	<div class="btn-group">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			下列
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">下拉链接 1</a></li>
			<li><a href="#">下拉链接 2</a></li>
		</ul>
  </div>
</div>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Vertical button group

The following example demonstrates the use of class .btn-group-vertical discussed in the table above:

< ;!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example - Vertical Button Group</title>
<link href="http:/ /libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="http://libs.baidu.com/jquery/2.0 .0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/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">
Drop-down
                                                                                                                        a href="#">Drop-down link 1</a></li>
<li><a href="#">Drop-down link 2</a></li>
                                                                                                      
#Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
   <title>Bootstrap 实例 - 垂直的按钮组</title>
   <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group-vertical">
	<button type="button" class="btn btn-default">按钮 1</button>
	<button type="button" class="btn btn-default">按钮 2</button>
	<div class="btn-group-vertical">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			下拉
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">下拉链接 1</a></li>
			<li><a href="#">下拉链接 2</a></li>
		</ul>
	</div>
</div>

</body>
</html>



Run Instance»

Click the "Run Instance" button to view the online instance

←
→