Bootstrap Buttons Group

Bootstrap provides a way to create buttons group in a single line. Usually <div> element is used for group creation. Find below list of classes provided by Bootstrap which you can use for button group creations:

Class Name	Descriptions
.btn-group	Create button group in single line (Horizontal).
.btn-group-vertical	Create button group in single line (Vertical).
.btn-group .btn-group-lg	Create large button group.
.btn-group .btn-group-sm	Create small button group.
.btn-group btn-group-xs	Create extra small button group.
.btn-group btn-group-justified	Create justified button group.

Syntax

<div class="btn-group">
  <button type="button" class="btn btn-primary">Bootstrap</button>
  <button type="button" class="btn btn-primary">CSS3</button>
</div>

Bootstrap Buttons Example

The following example shows in line buttons group:

<div style="background-color:#E5E5E5;width:99%;">
 <div class="page-header">
     <h1>Bootstrap Block Level Button</h1>
<div class="btn-group" style="margin:5px 0 15px 0px;padding-left:10px;">
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-primary">Bootstrap</button>
  <button type="button" class="btn btn-primary">CSS3</button>
</div>
</div>
</div>

See Live Example

The above buttons group example will produce below output:

Bootstrap Button Groups of Different Sizes Example

The following example shows in line buttons group of different sizes:

<div class="container">
     <div class="page-header">
     <h1>Bootstrap Buttons Styles</h1>
    <div class="bootstrap-demo">
    <!-- Standard Button -->
    <button type="button" class="btn btn-default">Default</button>
    <!-- Primary Button -->
    <button type="button" class="btn btn-primary">Primary</button>
    <!-- Successful Button -->
    <button type="button" class="btn btn-success">Success</button>
    <!-- Informational Button -->
    <button type="button" class="btn btn-info">Info</button>
    <!-- Warning Button -->
    <button type="button" class="btn btn-warning">Warning</button>
    <!-- Danger Button -->
    <button type="button" class="btn btn-danger">Danger</button>
    <!-- Link Button -->
    <button type="button" class="btn btn-link">Link</button></div>
    </div>
  </div>

See Live Example

The following example shows the button groups of different Sizes:

Vertical Buttons Group Example

Bootstrap also supports vertical button groups as well. The following example shows vertical button group:

<div style="background-color:#E5E5E5;width:99%;">
 <div class="page-header">
     <h1>Bootstrap Block Level Button</h1>
<div class="btn-group-vertical">
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-primary">Bootstrap</button>
  <button type="button" class="btn btn-primary">CSS3</button>
</div>
</div>
</div>
</div>

See Live Example

The above buttons group example will produce below output:

Nesting Button Groups Example

Bootstrap nesting button grouping allows to create dropdown menus. The following example shows nesting button group:

<div class="page-header">
  <h2>Nesting Button Groups</h2>
    <div class="btn-group">
<button type="button" class="btn btn-primary">HTML</button>
<button type="button" class="btn btn-primary">CSS3</button>
<div class="btn-group">
 <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          SCRIPT
  <span class="caret"></span>
 </button>
 <!-- Nested button group to create a dropdown -->
   <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">AngularJS</a></li>
	<li><a href="#">KnockoutJS</a></li>
	<li><a href="#">TypeScript</a></li>
   </ul>
</div>
</div>
</div>

See Live Example

The above buttons group example will produce below output:

Justified Button Groups Example

Bootstrap allows to create justified button dropdown menus. The following example shows justified buttons group:

<div class="page-header">
  <h2>Justified Button Groups</h2>
  <div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">HTML</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">CSS3</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">BOOTSTRAP</button>
  </div>
</div>
</div>

See Live Example

The above buttons group example will produce below output:

« Previous