Bootstrap Button Groups

Bootstrap button groups, group a series of buttons together on a single line or stacks them in a vertical column.

Button Group 
       	 
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
   
  

Note! Please keep in mind that button group can also be created with <a> & <input> element.Just apply above mention step to the describe element and create button group.

Example

General Syntax

      <div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left Button</button>
  <button type="button" class="btn btn-secondary">Middle Button</button>
  <button type="button" class="btn btn-secondary">Right Button</button>
</div>

Try It Now

Source Code

    <div class="container my-3 text-center">
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left Button</button>
    <button type="button" class="btn btn-secondary">Middle Button</button>
    <button type="button" class="btn btn-secondary">Right Button</button>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Note: In this example, assign .btn-group to the button group container & assign .btn & .btn-* to the every <button> base class.

Vertical Button Group

General Syntax

      <div class="btn-group-vertical">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Try It Now

Source Code

    <div class="container my-3 text-center">
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Note: To create a vertical group, assign .btn-group-vertical to the button group container base class.

Creating Button Group Using Hyperlink

Apply above mention steps to create a button group.

General Syntax

      <div class="btn-group">
    <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
    <a href="#" class="btn btn-primary">Link</a>
    <a href="#" class="btn btn-primary">Link</a>
 </div>

Try It Now

Source Code

    <div class="container my-3 text-center">
  <div class="btn-group">
    <a href="#" class="btn btn-primary active" aria-current="page">Active link1</a>
    <a href="#" class="btn btn-success">Link2</a>
    <a href="#" class="btn btn-info">Link3</a>
  </div> 
</div><!--/container-->

Try it yourself

Source Code : Output

Active link1 Link2 Link3

Note:Button groups can also be created using hyperlinks. Let us see it in the above example.

Checkbox Button Group

General Syntax

      <div class="btn-group" role="group" 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>
</div>

Try It Now

Source Code

    <div class="container my-3 text-center">
  <div class="btn-group" role="group" 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>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Checkbox 1 Checkbox 2

Note:To create a checkbox button group, assign all the checkboxes inside the checkbox container having class .btn-group and also assign .btn-check to the checkbox base class and .btn and .btn-outline-* to the label element base class.

Radio Button Group

General Syntax

      <div class="btn-group" role="group" 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>
</div>

Try It Now

Source Code

    <div class="container my-3 text-center">
  <div class="btn-group" role="group" 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>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Radio 1 Radio 2

Note: To create a radio button group, assign all the radio button inside the radio buttons container having class .btn-group and also assign .btn-check to the radio base class and .btn and .btn-outline-* to the label element base class.

Button Group Size

To control the size of every button in button group,add .btn-group-* to the container(<div>) having .btn-group.

Large Button 
       	 
<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
   
  

Small Button 
       	 
<div class="btn-group btn-group-sm">
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
  </div>
</div>
   
  

General Syntax

      <div class="btn-group btn-group-lg " role="group" aria-label="Basic example"> </div> 
<div class="btn-group btn-group-lg " role="group" aria-label="Basic example"></div>

Try It Now

Source Code

    <div class="container my-3 text-center">
  <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-info">Left</button>
    <button type="button" class="btn btn-success">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
  </div>
  <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
    <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-info">Left</button>
      <button type="button" class="btn btn-success">Middle</button>
      <button type="button" class="btn btn-info">Right</button>
    </div>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Note:To create small & large button group ,assign .btn-group-lg & .btn-group-sm to the button group container respectively.

Outline Button Group

General Syntax

      <div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-primary">Button1</button>
  <button type="button" class="btn btn-outline-primary">Button2</button>
  <button type="button" class="btn btn-outline-primary">Button3</button>
</div>

Try It Now

Source Code

    <div class="container my-3 text-center">
  <div class="btn-group" role="group" aria-label="Basic outlined example">
    <button type="button" class="btn btn-outline-primary">Button1</button>
    <button type="button" class="btn btn-outline-primary">Button2</button>
    <button type="button" class="btn btn-outline-primary">Button3</button>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Note: Place all the buttons inside the container and assign .btn-group to the base class of the container and also assign .btn & .btn-outline-* to every button base class.

Button toolbar

It combines a set of button groups into a button toolbar. Utility classes play a vital role to provide space between the group.

To make button toolbar,you must have to provide button group container i.e parent container to btn-toolbar class while as every button group parent container to btn-group class and every button to btn class followed by one of the btn-primary, btn-secondary,btn-success, btn-danger,btn-warning, btn-info,btn-dark, btn-light, btn-link to the element <a>, <button> or <input> class. To make a button toolbar, you must have to provide a button group container i.e parent container to the btn-toolbar class while every button groups parent container to btn-group class and every button to btn class followed by one of the btn-primary, btn-secondary,btn-success, btn-danger,btn-warning, btn-info,btn-dark, btn-light, btn-link to the element <a>, <button> or <input> class.

Button Toolbar 
       	 
<div class="btn-toolbar">
  <div class="btn-group mr-2">
    <button type="button" class="btn btn-secondary">button 1</button>
    <button type="button" class="btn btn-secondary">button 2</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">button 5</button>
    <button type="button" class="btn btn-secondary">button 6</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">button 8</button>
  </div>
</div>
   
  

General Syntax

      <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups example">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">button 1</button>
    <button type="button" class="btn btn-secondary">button 2</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">button 3</button>
    <button type="button" class="btn btn-secondary">button 4</button>
  </div>
</div>

Try It Now

Source Code

    <div class="container my-3 text-center">
  <div class="btn-toolbar row" role="toolbar" aria-label="Toolbar with button groups example">
    <div class="col-12 col-md-4 mb-4">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">button 1</button>
        <button type="button" class="btn btn-secondary">button 2</button>
      </div>
    </div>
    <!--/column-->
    <div class="col-12 col-md-4 mb-4">
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">button 5</button>
        <button type="button" class="btn btn-secondary">button 6</button>
      </div>
    </div>
    <!--/column-->
    <div class="col-12 col-md-4 mb-4">
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">button 8</button>
      </div>
    </div>
  </div>
  <!--/column-->
</div>
<!--/container-->

Try it yourself

Source Code : Output

Note: To create a button group toolbar, assign all the button groups inside the container and assign the .btn-toolbar class.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS