Bootstrap Buttons Group with examples
16-05-2017    346 times
Bootstrap Buttons Group

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>

bootstrap button group
Bootstrap Button Group

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).

Bootstrap Button Size
Bootstrap Button Size

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>

Bootstrap Button Vertical Group
Bootstrap Button Vertical Group

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>

Bootstrap Split Button Group
Bootstrap Split Button Group

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>

Split Button Bootstrap Split Button Group
Bootstrap Split Button Group
Bootstrap Split Button Group
freenotes
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post