Bootstrap Button Groups
Button groups allow multiple buttons to be stacked together on a single line. Different types of individual buttons and modify them with predefined classes.
Button Groups
.btn-group : This class is used for a basic button group. <div> element with class (.btn-group).
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Button Groups</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
<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>
<br /><br />
<div class="btn-group">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-primary">Button 2 </button>
<button type="button" class="btn btn-primary">Button 3</button>
</div>
</form>
</body>
</html>
Output :
Button 1
Button 2
Button 3
Button 1
Button 2
Button 3
Button Toolbars and Sizes
.btn-toolbar : This helps to combine sets of <div class = "btn-group"> into a <div class = "btn-toolbar"> for more complex components.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Button Toolbars and Sizes</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
<h3>Button Toolbars</h3>
<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>
<br /><br /><br />
<h3>Button Sizes</h3>
<div class = "btn-group btn-group-lg">
<button type = "button" class = "btn btn-primary">Button 1</button>
<button type = "button" class = "btn btn-primary">Button 2</button>
<button type = "button" class = "btn btn-primary">Button 3</button>
</div>
<div class = "btn-group btn-group">
<button type = "button" class ="btn btn-success">Button 4</button>
<button type = "button" class ="btn btn-success">Button 5</button>
<button type = "button" class ="btn btn-success">Button 6</button>
</div>
<div class = "btn-group btn-group-sm">
<button type = "button" class ="btn btn-info">Button 7</button>
<button type = "button" class ="btn btn-info">Button 8</button>
</div>
<div class = "btn-group btn-group-xs">
<button type = "button" class = "btn btn-warning">Button 9</button>
</div>
</form>
</body>
</html>
Vertical Button Groups
.btn-group-vertical : This class make a set of buttons appear vertically stacked rather than horizontally.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Vertical Button Groups</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">One</button>
<button type="button" class="btn btn-primary">Two</button>
<button type="button" class="btn btn-info">Three</button>
<button type="button" class="btn btn-success">Four</button>
<button type="button" class="btn btn-warning">Five</button>
<button type="button" class="btn btn-danger">Six</button>
</div>
</form>
</body>
</html>
Justified Button Groups
.btn-group-justified : To span the entire width of the screen, use the (.bt .btn-group-justified) class.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Justified Button Groups</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-info">One</a>
<a href="#" class="btn btn-info">Two</a>
<a href="#" class="btn btn-info">Three</a>
<a href="#" class="btn btn-info">Four</a>
<a href="#" class="btn btn-info">Five</a>
</div>
</form>
</body>
</html>
Nesting Button Groups and Split Button Dropdowns
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Nesting Button Groups and Split Buttons</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
<h3>Nesting Button Groups and Dropdowns</h3>
<div class="btn-group">
<button type="button" class="btn btn-primary">One</button>
<button type="button" class="btn btn-primary">Two</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Three <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Sample 1</a></li>
<li><a href="#">Sample 2</a></li>
<li><a href="#">Sample 3</a></li>
</ul>
</div>
</div>
<br /><br />
<h3>Split Button Dropdowns</h3>
<div class="btn-group">
<button type="button" class="btn btn-primary">Web Designing</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Photoshop</a></li>
</ul>
</div>
</form>
</body>
</html>