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:


Basic Button Group

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:

The above code will generate the following result

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:

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:

nesting

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:

Vertical button groups