Bootstrap Button Groups

Advertisements


Button groups allow multiple buttons to be stacked together on a single line. This is useful when you want to place items like alignment buttons together. You can add on optional JavaScript radio and checkbox style behavior with Bootstrap Button Plugin.

Following table summarizes the important classes Bootstrap provides to use button groups:

ClassDescriptionCode Sample
.btn-groupThis class is used form a basic button group. Wrap a series of buttons with class .btn in .btn-group.
<div class="btn-group">
  <button type="button" class="btn btn-default">Button1</button>
   <button type="button" class="btn btn-default">Button2</button>
</div>
.btn-toolbarThis helps to combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xsThese classes can be applied to button group instead of resizing each button.
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
.btn-group-verticalThis class make a set of buttons appear vertically stacked rather than horizontally.
<div class="btn-group-vertical">
  ...
</div>

Basic Button Group

Following examples demonstrates the use of class .btn-group discussed in the above table:

<div class="btn-group">
  <button type="button" class="btn btn-default">Button 1</button>
  <button type="button" class="btn btn-default">Button 2</button>
  <button type="button" class="btn btn-default">Button 3</button>
</div>
Basic Button Group Demo

Button Toolbar

Following examples demonstrates the use of class .btn-toolbar discussed in the above table:

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
  <button type="button" class="btn btn-default">Button 1</button>
  <button type="button" class="btn btn-default">Button 2</button>
  <button type="button" class="btn btn-default">Button 3</button>
 </div>
  <div class="btn-group">
  <button type="button" class="btn btn-default">Button 4</button>
  <button type="button" class="btn btn-default">Button 5</button>
  <button type="button" class="btn btn-default">Button 6</button>
  </div>
  <div class="btn-group">
  <button type="button" class="btn btn-default">Button 7</button>
  <button type="button" class="btn btn-default">Button 8</button>
  <button type="button" class="btn btn-default">Button 9</button>
  </div>
</div>
Button Toolbar Demo

Button Size

Following examples demonstrates the use of class .btn-group-* discussed in the above table:

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-default">Button 1</button>
  <button type="button" class="btn btn-default">Button 2</button>
  <button type="button" class="btn btn-default">Button 3</button>
 </div>
  <div class="btn-group btn-group-sm">
  <button type="button" class="btn btn-default">Button 4</button>
  <button type="button" class="btn btn-default">Button 5</button>
  <button type="button" class="btn btn-default">Button 6</button>
</div>
  <div class="btn-group btn-group-xs">
  <button type="button" class="btn btn-default">Button 7</button>
  <button type="button" class="btn btn-default">Button 8</button>
  <button type="button" class="btn btn-default">Button 9</button>
</div>
Button Group size Demo

Nesting

You can nest button groups within another button group i.e, place a .btn-group within another .btn-group . This is done when you want dropdown menus mixed with a series of buttons.

<div class="btn-group">
  <button type="button" class="btn btn-default">Button 1</button>
  <button type="button" class="btn btn-default">Button 2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link 1</a></li>
      <li><a href="#">Dropdown link 2</a></li>
    </ul>
  </div>
</div>
Nested Button Grp Demo

Vertical Buttongroup

Following examples demonstrates the use of class .btn-group-vertical discussed in the above table:

<div class="btn-group-vertical">
  <button type="button" class="btn btn-default">Button 1</button>
  <button type="button" class="btn btn-default">Button 2</button>

  <div class="btn-group-vertical">
    <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link 1</a></li>
      <li><a href="#">Dropdown link 2</a></li>
    </ul>
  </div>
</div>
Vertical Button Grp Demo


Advertisements
Advertisements