×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Bootstrap Buttons with examples Bootstrap Alert [Success | Info | Warning | Danger]
Bootstrap Buttons Group with examples - Bootstrap 3
2691    Arnab De    16/05/2017

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
Bootstrap Buttons with examples Bootstrap Alert [Success | Info | Warning | Danger]
softetechnologies
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.
Enter New Comment
Comment History
No Comment Found Yet.
Rabindranath Tagore
Every child comes with the message that God is not yet discouraged of man.
Rabindranath Tagore
2446
34.21
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     33608
28/06/2017     29530
02/08/2017     27024
26/05/2018     26987
15/05/2017     23239
06/07/2017     21773
01/08/2017     21320
25/06/2018     20123
21/04/2018     18620
14/07/2017     16470
softetechnologies