Bootstrap Button Groups
In bootstrap we can group more than one buttons in a single by using the bootstrap button group. Bootstrap button groups are advantageous when the user has to place the alignment button together in a single line.
Consider the following table in which the button group classes that are available in bootstrap are described:
| Classes | Description | Example |
| .btn- group | The .btn-group class is used to create simple multiple buttons in a line. We can add the buttons with the class .btn inside the .btn- group class to create multiple buttons in a single line. | < div class = “btn -group”>
< button type = “button” class = “btn btn- default” > B1 </ button > < button type = “button” class = “btn btn- default” > B2 </ button > </ div >
|
| .btn- toolbar | This class is used to combine the class <div class = “btn-group”>with the class<div class = “btn-toolbar”> | < divclass=”btn- toolbar”role=”toolbar” >
< divclass=”btn-group” ></ div > < divclass=”btn-group” ></ div > </ div >
|
| .btn- group- lg, .btn- group- sm, .btn- group- xs | We can resize the button group by using these classes. The whole button group will be resized including all the buttons. | < divclass=”btn- group btn- group- lg” >< /div >
< divclass=”btn- group btn- group- sm” >< /div > < divclass=”btn- group btn- group- xs” >< /div >
|
| .btn- group- vertical | This class is used to display multiple buttons vertically instead of displaying them horizontally. | < divclass=”btn- group- vertical”>
< /div > |
Basic Button Group:
Consider the following example in which the use of .btn- group class is demonstrated:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”/scripts/jquery.min.js”></script>
<script src=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<div class = “btn-group”>
<button type = “button” class = “btn btn-default”>B1</button>
<button type = “button” class = “btn btn-default”>B2</button>
<button type = “button” class = “btn btn-default”>B3</button>
</div>
</body>
</html>
The above code will generate the following result:
OUTPUT:
Button Toolbar:
Consider the following example in which we have used the .btn- toolbar class:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”/scripts/jquery.min.js”></script>
<script src=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<div class = “btn-toolbar” role = “toolbar”>
<div class = “btn-group”>
<button type = “button” class = “btn btn-default”>B1</button>
<button type = “button” class = “btn btn-default”>B2</button>
<button type = “button” class = “btn btn-default”>B3</button>
</div>
<div class = “btn-group”>
<button type = “button” class = “btn btn-default”>B4</button>
<button type = “button” class = “btn btn-default”>B5</button>
<button type = “button” class = “btn btn-default”>B6</button>
</div>
<div class = “btn-group”>
<button type = “button” class = “btn btn-default”>B7</button>
<button type = “button” class = “btn btn-default”>B8</button>
<button type = “button” class = “btn btn-default”>B9</button>
</div>
</div>
</body>
</html>
The above code will generate the following result:
OUTPUT:
In the above example we used the class .btn- toolbar which allows the user to combine the class <div class = “btn-group”> with the class <div class = “btn-toolbar”> and hence we have three button groups.
Button Size:
Consider the following example in which we have used the .btn- group- lg, .btn- group- sm, and .btn- group- xs classes for the size of button groups:
CODE:
<! DOCTYPE html >
< html >
< head >
< title > Bootstrap Example </ title >
< link href = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >
< script src = “/ scripts/ jquery. min. js” >< /script >
< script src = “/ bootstrap/ js/ bootstrap. min. js” ></ script >
</ head >
< body >
< div class = “btn- group btn- group- lg” >
< button type = “button” class = “btn btn- default” > B1 </ button >
< button type = “button” class = “btn btn- default” > B2 </ button >
< button type = “button” class = “btn btn- default” > B3 </ button >
</ div >< br >
< div class = “btn- group btn- group- sm” >
< button type = “button” class = “btn btn- default” > B4 </ button >
< button type = “button” class = “btn btn- default” > B5 </ button >
< button type = “button” class = “btn btn- default” > B6 </ button >
</ div >< br >
< div class = “btn- group btn- group- xs” >
< button type = “button” class = “btn btn- default” > B7 </ button >
< button type = “button” class = “btn btn- default” > B8 </ button >
< button type = “button” class = “btn btn- default” > B9 < /button >
</ div >
</ body >
</ html >
The above code will generate the following result:
OUTPUT:
Nesting:
A button group in bootstrap can be nested inside another button group by simply using the .btn- group class inside another .btn- group class.
Consider the following example in which we have created nested button groups:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”/scripts/jquery.min.js”></script>
<script src=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<div class = “btn-group”>
<button type = “button” class = “btn btn-default”>B1</button>
<button type = “button” class = “btn btn-default”>B2</button>
<div class = “btn-group”>
<button type = “button” class = “btn btn-default dropdown-toggle” data-toggle = “dropdown”>Menu
<span class = “caret”></span>
</button>
<ul class = “dropdown-menu”>
<li>C++</li>
<li>Matlab</li>
</ul>
</div>
</div>
</body>
</html>
The above code will generate the following result:
OUTPUT:
In the above example we used the nested button groups. Nested button groups are useful when dropdown menus are used with buttons.
Vertical button groups:
Consider the following example in which we have used the .btn- group- vertical class to display the button group vertically instead of horizontally:
CODE:
<! DOCTYPE html >
< html >
< head >
< title > Bootstrap Example </ title >
< link href = “/ bootstrap/ css/ bootstrap. min. css ” rel = “stylesheet” >
< script src = ” /scripts / jquery. min. js” >< /script >
< script src = “/ bootstrap/ js/ bootstrap. min. js” ></ script >
</ head >
< body >
< div class = “btn- group- vertical” >
< button type = “button” class = “btn btn- default” > B1 < /button >
< button type = “button” class = “btn btn- default” > B2 </ button >
< div class = “btn- group- vertical” >
< button type = “button” class = “btn btn- default dropdown- toggle” data- toggle = “dropdown” > Menu
< span class = “caret” ></ span >
</ button >
< ul class = “dropdown- menu” >
< li > C++ </ li >
< li > Matlab </ li >
</ ul >
< /div >
</ div >
< /body >
</ html >
The above code will generate the following result:
OUTPUT:
