In our previous post, we have learned about the bootstrap button and we are going to learn Bootstrap 3 Button Group . for that we have to include some buttons inside a div or container and give it to the class name .btn-group
, normally its a horizontal button group
Example:
<div class="btn-group"> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-primary">Middle</button> <button type="button" class="btn btn-primary">Right</button> </div>
Now the types of the button group
Button Toolbar
You can also set of button groups together for creating a toolbar like a view. To create button toolbar just apply the class .btn-toolbar
on its parent div.
Example:
<div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-primary">1</button> <button type="button" class="btn btn-primary">2</button> <button type="button" class="btn btn-primary">3</button> <button type="button" class="btn btn-primary">4</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">5</button> <button type="button" class="btn btn-primary">6</button> <button type="button" class="btn btn-primary">7</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">8</button> </div> </div>
Size of Button Group
There is 4 type of size available in bootstrap 3 button group and they are:
Large Button Group:
to make a large size button group apply a class name .btn-group-lg
with class name .btn-group
Example:
<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-primary">Middle</button> <button type="button" class="btn btn-primary">Right</button> </div>
Normal or Medium Button Group:
to make a normal or medium-size button group apply a class name .btn-group
Example:
<div class="btn-group"> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-primary">Middle</button> <button type="button" class="btn btn-primary">Right</button> </div>
Small Button Group:
to make a small size button group apply a class name .btn-group-sm
with class name .btn-group
Example:
<div class="btn-group btn-group-sm"> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-primary">Middle</button> <button type="button" class="btn btn-primary">Right</button> </div>
Extra Small Button Group:
to make an extra small size button group apply a class name .btn-group-xs
with class name .btn-group
Example:
<div class="btn-group btn-group-xs"> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-primary">Middle</button> <button type="button" class="btn btn-primary">Right</button> </div>
Justified Button Groups
To make a justified button group or full-width content button group apply a class name .btn-group-justified
with class name .btn-group
on its parent div.
Example:
<div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">Left</a> <a href="#" class="btn btn-primary">Middle</a> <a href="#" class="btn btn-primary">Right</a> </div>
Vertical Button Groups
To make a verticle that is one after another on its below button group apply a class name .btn-group-justified
on its parent div.
Example:
<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>
In this post, we have discussed Bootstrap 3 Button Group and hope it will help you. and please provide your comments to make the site better and useful.
Thanks for Reading