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>

Useful Video Courses


Video

Bootstrap Online Training

26 Lectures 2 hours

Anadi Sharma

Video

Bootstrap 4 Responsive Web Development

54 Lectures 4.5 hours

Frahaan Hussain

Video

Bootstrap By Building Projects - Includes Bootstrap 4

Featured

161 Lectures 14.5 hours

Eduonix Learning Solutions

Video

Responsive E Commerce Website Designing Without Bootstrap

20 Lectures 4 hours

Azaz Patel

Video

Bootstrap 4 for Tutorials

15 Lectures 1.5 hours

Muhammad Ismail

Video

Complete Bootstrap 5 Course From Scratch With 3 Projects

62 Lectures 8 hours

Yossef Ayman Zedan

Advertisements