Bootstrap Button Groups

In the previous chapter, we learned how to extend the default style of buttons using bootstrap classes. Now, we will learn how to group a series of buttons together on a single line using the bootstrap button group component.

 

In bootstrap, to create button groups we need to wrap a series of buttons with .btn class in <div> element and apply .btn-group class on it.

 

Following is the example of creating a group of buttons together on a single line using .btn-group class in bootstrap.

 

Live Preview <div class="btn-group">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">Tutorials</button>
    <button type="button" class="btn btn-primary">Contact</button>
</div>

If you observe the above example, we created a series of buttons with .btn class and wrapped inside of <div> element and applied .btn-group class on it to group buttons together on a single line.

 

The above example will return the result as shown below.

 

Bootstrap button groups example result

Bootstrap Button Groups Toolbar

In bootstrap, we can create a button toolbar component by combining the sets of different button groups in <div> element and apply .btn-toolbar class on it like as shown below.

 

Live Preview <div class="btn-toolbar">
   <div class="btn-group mr-2">
      <button type="button" class="btn btn-primary"><b>B</b></button>
      <button type="button" class="btn btn-primary"><i>I</i></button>
      <button type="button" class="btn btn-primary"><u>U</u></button>
      <button type="button" class="btn btn-primary">A</button>
   </div>
   <div class="btn-group mr-2">
      <button type="button" class="btn btn-primary"><i class="fa fa-align-left"></i></button>
      <button type="button" class="btn btn-primary"><i class="fa fa-align-center"></i></button>
      <button type="button" class="btn btn-primary"><i class="fa fa-align-right"></i></button>
      <button type="button" class="btn btn-primary"><i class="fa fa-list"></i></button>
      <button type="button" class="btn btn-primary"><i class="fa fa-list-ol"></i></button>
   </div>
   <div class="btn-group">
      <button type="button" class="btn btn-primary"><i class="fa fa-code"></i></button>
      <button type="button" class="btn btn-primary"><i class="fa fa-picture-o"></i></button>
   </div>
</div>

If you observe the above example, we added a utility class .mr-2 along with .btn-group classes to create a space between the button groups.

 

The above example will return the result as shown below.

 

Bootstrap button groups toolbars example result

Bootstrap Button Group Sizing

Instead of adding button sizing classes on every button in a group, you can directly apply the classes like .btn-group-lg or .btn-group-sm on button group to create smaller or larger button groups like as shown below.

 

Live Preview <div class="btn-group mb-2 btn-group-lg">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">Tutorials</button>
    <button type="button" class="btn btn-primary">Articles</button>
</div>
<br>
<div class="btn-group mb-2">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">Tutorials</button>
    <button type="button" class="btn btn-primary">Articles</button>
</div>
<br>
<div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">Tutorials</button>
    <button type="button" class="btn btn-primary">Articles</button>
</div>

If you observe the above example, we created button groups with .btn-group-lg and .btn-group-sm classes to create larger and smaller button groups based on our requirements.

 

The above example will return the result as shown below.

 

Bootstrap button groups sizing example result

Bootstrap Nesting Button Groups

In bootstrap, we can create nesting of button groups by placing one button group (.btn-group) within another button group (.btn-group). The nesting button groups are useful when you want to create dropdown menus mixed with a series of buttons.

 

Live Preview <div class="btn-group">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">Articles</button>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Tutorials
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Java</a>
            <a class="dropdown-item" href="#">Database</a>
        </div>
    </div>
</div>

The above example will return the result as shown below.

 

Bootstrap nesting button groups example result

Bootstrap Vertical Button Groups

To make the button groups appear vertically rather than horizontal, you need to add .btn-group-vertical class instead of .btn-group class to the button groups like as shown below.

 

Live Preview<div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">Articles</button>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Tutorials
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Java</a>
            <a class="dropdown-item" href="#">Database</a>
        </div>
    </div>
</div>

The above example will return the result as shown below.

 

Bootstrap vertical button groups example result

Bootstrap Justified Button Groups

By applying bootstrap .d-flex class to button groups (.btn-group), we can create justified button groups to adjust the width based on the device size.

 

Live Preview <div class="btn-group d-flex">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">Articles</button>
<button type="button" class="btn btn-primary">Tutorials</button>
</div>

If you observe the above example, we added .d-flex class along with .btn-group class to create justified button groups based on our requirements.

 

The above example will return the result as shown below.

 

Bootstrap justified button groups example result

 

This is how we can create button groups by wrapping a series of buttons in <div> element based on our requirements.