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 −

Class	Description	Code Sample
.btn-group	This class is used for 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-toolbar	This 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-xs	These 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-vertical	This class make a set of buttons appear vertically stacked rather than horizontally.	<div class = "btn-group-vertical"> ... </div>

Basic Button Group

The following example 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>

Button Toolbar

The following example 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 Size

The following example 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>

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>

Vertical Buttongroup

The following example 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>