Bootstrap Button Groups

devika varshney
Last Updated: May 13, 2022

Introduction

Bootstrap button group is a series of buttons kept together on a single line/navbar and can be stacked in a vertical column. For aligning the switch together, it is advantageous. With the help of the bootstrap plugin, we can also see the javascript checkbox and radio-style behavior. So for developing a button group, we use the .btn-group class with the parent div. Moreover, we will go through all the classes required, or you can use them to develop a helpful button group for your website.

Classes required to use Bootstrap Button Groups 

.btn-group 

For making a primary button, we use this class by wrapping a series of a button with .btn inside .btn-group.

.btn-toolbar

For developing more complex components we combine sets of <div class="btn-group"> into <div class="btn-toolbar">.

.btn-group-lg, .btn-group-sm, .btn-group-xs

These classes are used for applying different sizing to the bootstrap button groups.

.btn-group-vertical

We use this class to stack the button group vertically rather than horizontally. 

 

Note - we will discuss these classes more, with an example further in this blog.

Basic example 

<div class = "btn-group" style="margin:100px">
   <button type = "button" class = "btn btn-dark btn-default">Button1</button>
   <button type = "button" class = "btn btn-dark btn-default">Button2</button>
</div>

 

Output

We can use the .active class to highlight a link in the button in the button group.

<div class="btn-group" style="margin:100px">
  <a href="#!" class="btn btn-primary active">Active link</a>
  <a href="#!" class="btn btn-primary">Link</a>
  <a href="#!" class="btn btn-primary">Link</a>
</div>

 

 Output

Role attribute - 

An appropriate role attribute needs to be given to convey that a series of a button is grouped for assistive technology. we use role ="group" for button groups and role ="toolbar" for button toolbars.

Moreover, explicit labels should be taken by groups and toolbars because assistive technologies don't announce them even if the role attribute is present. For example, we arial-labelledby with Arial-label as an alternative.

Different styles of buttons 

  • Mixed styles 


We can have different colors for every button in eclectic style button groups.

<div class="btn-group"  style="margin:100px" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

 

Output

  • Outline styles 


In outline button group style, we can have buttons with only outlines and no color.

<div class="btn-group shadow-0" style="margin:100px" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-secondary" data-mdb-color="dark">
    Left
  </button>
  <button type="button" class="btn btn-outline-secondary" data-mdb-color="dark">
    Middle
  </button>
  <button type="button" class="btn btn-outline-secondary" data-mdb-color="dark">
    Right
  </button>
</div>

 

Output

Checkbox button group

Check box button group allows users to select more than one button and toggle.

<div class="btn-group" role="group" style="margin:100px" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>


  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>


  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

 

Output

Radio button 

The radio box button group allows the user to select only one button and toggle.

<div class="btn-group" role="group" style="margin:100px"  aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>


  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>


  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

 

Output 

Button toolbar

We will add the .btn-toolbar style as we discussed in the above table.

<div class="btn-toolbar" role="toolbar" style="margin:100px" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-primary">5</button>
    <button type="button" class="btn btn-primary">6</button>
    <button type="button" class="btn btn-primary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-primary">8</button>
  </div>
</div>

 

Output

Button toolbars are complex components in which we use utility classes to space out groups and buttons, and we can also mix input groups with button groups.

<div class="btn-toolbar mb-3" style="margin:100px" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</div>
    <input
      type="text"
      class="form-control"
      placeholder="Input group example"
      aria-label="Input group example"
      aria-describedby="btnGroupAddon"
    />
  </div>
</div>


<div
  class="btn-toolbar justify-content-between"
  role="toolbar" 
  aria-label="Toolbar with button groups"
>
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</div>
    <input
      type="text"
      class="form-control"
      placeholder="Input group example"
      aria-label="Input group example"
      aria-describedby="btnGroupAddon2"
    />
  </div>
</div>

 

Output

Properties

Sizing

.btn-group-* (.btn-group-lg|sm|xs) class is used for defining different sizing of the button groups to each .btn-group rather than applying button sizing classes to each individual button in a group.

<!-- Large -->
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>


<!-- Standard -->
<div class="btn-group" style="margin-right:50px; margin-left:50px;margin-top:50px; margin-bottom:50px" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>


<!-- Small -->
<div class="btn-group btn-group-sm"  role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

 

Output

Colors

We can have different colors for button groups.

<div class="btn-group shadow-0" role="group">
  <button type="button" class="btn btn-light" data-mdb-color="dark">Left</button>
  <button type="button" class="btn btn-light" data-mdb-color="dark">Middle</button>
  <button type="button" class="btn btn-light" data-mdb-color="dark">Right</button>
</div>


<div class="btn-group shadow-0" role="group">
  <button type="button" class="btn btn-link" data-mdb-color="dark">Left</button>
  <button type="button" class="btn btn-link" data-mdb-color="dark">Middle</button>
  <button type="button" class="btn btn-link" data-mdb-color="dark">Right</button>
</div>


<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>


<div class="btn-group" role="group">
  <button type="button" class="btn btn-success">Left</button>
  <button type="button" class="btn btn-success">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>


<div class="btn-group" role="group">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-danger">Middle</button>
  <button type="button" class="btn btn-danger">Right</button>
</div>


<div class="btn-group" role="group">
  <button type="button" class="btn btn-warning">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-warning">Right</button>
</div>


<div class="btn-group" role="group">
  <button type="button" class="btn btn-info">Left</button>
  <button type="button" class="btn btn-info">Middle</button>
  <button type="button" class="btn btn-info">Right</button>
</div>


<div class="btn-group" role="group">
  <button type="button" class="btn btn-dark">Left</button>
  <button type="button" class="btn btn-dark">Middle</button>
  <button type="button" class="btn btn-dark">Right</button>
</div>

 

Output

Nesting

We place .btn-group into another .btn-group when we want dropdown menus mixed with a series of a button.

<div class="btn-group" style="margin:100px" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>


  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

 

Output

Vertical variations

And as we mentioned above for making a set of buttons appear vertically stacked, we use the .btn-group-vertical class for it. And it doesn't support split button dropdowns. 

<div class="btn-group-vertical" style="margin:100px" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
</div>

 

Output

Vertical nested button groups example 

<div class="btn-group-vertical" role="group" style="margin:100px" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <div class="btn-group" role="group">
    <button
      id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"
    >
      Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <div class="btn-group" role="group">
    <button
      id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"
    >
      Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <button
      id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"
    >
      Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
   <div class="btn-group" role="group">
    <button
      id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"
    >
      Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

 

Output

Justified button groups

The entire width of the screen is spanned by using the .btn-group-justified class.

<div class="btn-group btn-group-justified" style="margin:100px">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>

 

Output

Frequently Asked Questions

  1. Can we use split buttons with vertically stacked button groups?
    No, you can’t.
     
  2. What are classes being used for changing color of buttons?
    .btn-primary , .btn-danger , ..btn-secondary, .btn-info, .btn-light, .btn-success etc.

Key Takeaways

In this blog, we covered the bootstrap button groups and different bootstrap button groups that are outlined and mixed. Furthermore, we looked into a checkbox and radio bootstrap button groups, went through the properties like sizing, vertical variations, and colors.

Don't come to a halt here. Check out our Importance of JavaScript to web programming. You can also check out the blog on the JavaScript Interview Questions. Check out some javascript certifications by clicking on Javascript certifications.

 

Was this article helpful ?
0 upvotes