Bootstrap Buttons Group

Using Bootstrap classes we can group more than one button together. The default classes for the Bootstrap Buttons group is

• .btn-group
• Size of the button
• .btn-group-xs
• .btn-group-sm
• .btn-group-md
• .btn-group-lg
• .btn-group-vertical
• .btn-group-justified

A simple program to create Bootstrap Buttons Group

<div class="btn-group">
<button type="button" class="btn btn-danger">Red</button>
<button type="button" class="btn btn-success">Green</button>
<button type="button" class="btn btn-info">Blue</button>
</div>

Size of the Bootstrap Buttons Group

For setting the size of the button group we use the following class

• .btn- group-sm
• .btn- group-md
• .btn- group-lg

<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-danger">Red</button>
<button type="button" class="btn btn-success">Green</button>
<button type="button" class="btn btn-info">Blue</button>
</div> <span>.btn-group-sm</span>
<br><br>
<div class="btn-group btn-group-md">
<button type="button" class="btn btn-danger">Red</button>
<button type="button" class="btn btn-success">Green</button>
<button type="button" class="btn btn-info">Blue</button>
</div>
<span>.btn-group-md</span><br><br>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-danger">Red</button>
<button type="button" class="btn btn-success">Green</button>
<button type="button" class="btn btn-info">Blue</button>
</div>
<span>.btn-group-lg</span>

Note: the default button group size is medium ( i.e. .btn-group-md class).

Vertical Bootstrap Buttons Group

Use the .btn-group-vertical class to create a vertical button group.

<div style="position:relative;left:25%">
<div class="btn-group-vertical">
<button type="button" class="btn btn-danger">Red</button>
<button type="button" class="btn btn-success">Green</button>
<button type="button" class="btn btn-info">Blue</button>
</div>
</div>

Justify Bootstrap Buttons Group

To create a full width button group we use the .btn-group-justified class

<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-danger">Red</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">Green</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">Blue</button>
</div>
</div>

Split button with dropdown methods

Button may split and display a dropdown menu into it.

<div class="container" style="margin-top:50px;">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-tog gle="dropdown">
Language <span class="caret"></span></button>
<div class="dropdown-menu" role="menu" id="dropdown">
<a class="dropdown-item" href="#">C</a>
<a class="dropdown-item" href="#">PHP</a>
</div>
</div>
</div>

Nested button Group

<div class="btn-group">
<button type="button" class="btn btn-primary">OS</button>
<button type="button" class="btn btn-primary">Application</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Language <span class="caret"></span></button>
<div class="dropdown-menu" role="menu" id="dropdown">
<a class="dropdown-item" href="#">C</a>
<a class="dropdown-item" href="#">PHP</a>
</div>
</div>
</div>

Bootstrap Split Button Group