Bootstrap | Button Groups

Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial, we will be studying about Bootstrap button groups.

Button groups allow multiple buttons to be piled together on a single line. This is very useful when you want to place items such as alignment buttons together. You can add an optional JavaScript radio and checkbox style behavior with Bootstrap button plugin.

Following table summarizes the important classes that Bootstrap provides to use the 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>

READ: Bootstrap | Dropdowns

Basic Button Group

The following example below demonstrates the use of .btn-group class discussed in the table above -

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

Output

When the above example is executed, it will produce the following result -

Button Toolbar

Following example demonstrates the usage of .btn-toolbar class 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>

Output

When the above example is executed, it will produce the following result -

Button Size

Following example demonstrates the usage of .btn-group-* class 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>

Output

When the the above example is executed, it will produce the following result -

READ: Bootstrap | Glyphicons

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>

Output

When the above example is executed, it will produce the following result -

Vertical Button Group

Following example below demonstrates the use of .btn-group-vertical class 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>

Output

When the above example is executed, it will produce the following result -

READ: Bootstrap | Helper Classes

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Button Dropdowns.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.