Bootstrap 4 Button Groups

Bootstrap 4 button groups are used to groups a series of buttons together on a single line or stack them in a vertical column.

Process to create bootstrap 4 button groups:

Assign .btn-group to the button group container.
Assign .btn and button background contextual classes btn-* to the every <button>,<a> or <input> element base class.

Button Group Example

General Syntax

      <div class="btn-group">
  <button type="button" class="btn btn-primary">Add</button>
  <button type="button" class="btn btn-success">Substract</button>
  <button type="button" class="btn btn-info">Divide</button>
</div>

Try it now

Source Code

          <div class="container mt-4 text-center">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Add</button>
    <button type="button" class="btn btn-success">Substract</button>
    <button type="button" class="btn btn-info">Divide</button>
  </div>
</div>

Try it now

Source Code: Output

Note:In the above example,.btn-group ,.btn followed by one of the background contextual classes (.btn-*) is used to create button group.Please keep in mind that the button group is a collection of buttons that could be aligned either horizontally or vertically.

Button toolbar

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

Follow the following steps to make button toolbar:

To make button toolbar, assign .btn-toolbar to the button group container.
Assign .btn-group to the every button container.
Assign .btn & contextual classes btn-* to the every <button> container.
Followings are the button contextual class:btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-dark, btn-light, btn-link.

Button Toolbar Example

General Syntax

      <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group"></div>
  <div class="btn-group mr-2" role="group" aria-label="Second group"></div>
  <div class="btn-group" role="group" aria-label="Third group"></div>
</div>

Try it now

Source Code

          <div class="container mt-4">
  <b>Button Toolbar</b>
  <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
      <button type="button" class="btn btn-primary">Add</button>
      <button type="button" class="btn btn-secondary">Edit</button>
      <button type="button" class="btn btn-info">Delete</button>
    </div>
  </div>
</div>

Try it now

Source Code: Output

Button Toolbar

Note:Please keep in mind that the button toolbar is a collection of button groups.Although button group is a collection of buttons.

Bootstrap 4 Button Groups: Size

To control the size of button group, follow the given below instructions:

Large Size: To make large button group, assign .btn-group-lg to the button container i.e having .btn-group.
Small Size: To make smaller button group, assign .btn-group-sm to the button container i.e having .btn-group.

Example

General Syntax

      <div class="btn-group btn-group-lg"></div>      
<div class="btn-group btn-group-sm"></div>

Try it now

Source Code

          <div class="container mt-4">
  <b>Button Group Size</b>
  <div class="row">
    <div class="col-sm-4">
      <div class="btn-group btn-group-lg" role="group">
        <button type="button" class="btn btn-success">Larger Button Group</button>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-info">Normal Button Group</button>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="btn-group btn-group-sm" role="group">
        <button type="button" class="btn btn-primary">Smaller Button Group</button>
      </div>
    </div>
  </div>
</div>

Try it now

Source Code: Output

Button Group Size

Note: Keep in mind that button group size can be controlled by .btn-group-lg & .btn-group-sm.To make larger button group, assign .btn-group-lg to the buttonbutton group ,assign .btn-group-sm to the button container having .btn-group.

Vertical Button Group

To create vertical button group, you have to apply .btn-group-vertical to parent button container base class.

Example

General Syntax

      <div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Button 1</button>
</div>

Try it now

Source Code

          <div class="container mt-4">
  <h2>Vertical Button Group</h2>
  <div class="btn-group btn-group-vertical">
    <button type="button" class="btn btn-success">Web Development</button>
    <button type="button" class="btn btn-info">Graphics Design</button>
    <button type="button" class="btn btn-primary">AppDevelopment</button>
  </div>
</div>

Try it now

Source Code: Output

Vertical Button Group

Vertical button group can easily created by assigning .btn-group-vertical to the button

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4