Tutorials Tonight
Follow Us

BOOTSTRAP 4 BUTTONS GROUP


In this tutorial, you will learn how to create a button group, their vertical alignment, create a button group with a dropdown menu, etc.

Bootstrap Button Group

Using Bootstrap you can group a series of buttons together in a single line with the button group.

To wrap a series of buttons with a .btn class just put all those buttons in a div element and add .btn-group class to it.

Example:

Code:

Example

<div class="btn-group">
  <button class="btn btn-primary">HTML</button>
  <button class="btn btn-primary">CSS</button>
  <button class="btn btn-primary">Javascript</button>
</div>
▶ Run the code

Button Group Size

You can increase or decrease the size of the button group by adding btn-group-lg or btn-group-sm class.

You can apply these classes to the div element if you want to apply it to all buttons in the group or to the individual buttons if you want to apply it to only one button.

Example:

Large button group

Default button

Small button group

Code:

Example

<p>Large button group</p>
<div class="btn-group btn-group-lg">
  <button class="btn btn-primary">HTML</button>
  <button class="btn btn-primary">CSS</button>
  <button class="btn btn-primary">Javascript</button>
</div>
<p>Default button sizes</p>
<div class="btn-group">
  <button class="btn btn-primary">HTML</button>
  <button class="btn btn-primary">CSS</button>
  <button class="btn btn-primary">Javascript</button>
</div>
<p>Small button group</p>
<div class="btn-group btn-group-sm">
  <button class="btn btn-primary">HTML</button>
  <button class="btn btn-primary">CSS</button>
  <button class="btn btn-primary">Javascript</button>
</div>
▶ Run the code

bootstrap button dropdown

A dropdown button is a button that has a dropdown menu. It can be used to create a dropdown menu for a series of buttons. In bootstrap, you can easily create a dropdown menu.

To create a list of buttons with a dropdown menu, and add a dropdown-menu class on the list and add a dropdown-item class on the list items.

With it creates a button with dropdown-toggle class, and add data-toggle="dropdown" to it.

Finally, wrap this in a div element with a .btn-group class.

Example:

Code:

Example

<div class="btn-group">
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Web Development</button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">HTML</a>
      <a class="dropdown-item" href="#">CSS</a>
      <a class="dropdown-item" href="#">Javascript</a>
    </div>
  </div>
</div>
▶ Run the code

Split Button Dropdown

A split button dropdown is a button that has a dropdown menu. It can be used to create a dropdown menu for a series of buttons. In bootstrap, you can easily create a dropdown menu.

To create a button split use the .dropdown-toggle-split class with other necessary dropdown classes.

Example:

Code:

Example

<div class="btn-group">
  <button type="button" class="btn btn-primary">Web Development</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">HTML</a>
    <a class="dropdown-item" href="#">CSS</a>
    <a class="dropdown-item" href="#">Javascript</a>
  </div>
</div>
▶ Run the code

Verticle Button Group In Bootstrap

By default buttons in the button group in bootstrap is horizontal but you can change the orientation of the button to verticle order.

A vertical button group is a group of buttons that appear vertically stacked. It is useful for creating a toolbar.

To create a button group in verticle use .btn-group-vertical class with other necessary button classes.

Example:

Code:

Example

<div class="btn-group-vertical">
  <button class="btn btn-primary">C++</button>
  <button class="btn btn-primary">Java</button>
  <button class="btn btn-primary">Python</button>
</div>
▶ Run the code

Bootstrap 4 Button Toolbar

A button toolbar is a group of buttons that appear horizontally stacked. It is useful for creating a toolbar.

For more complex components you can combine sets of button groups into toolbars. To create a button toolbar make a collection of button groups and use bootstrap's utility classes to separate them. Example: for margin-right use .mr-*.

Example:

Code:

Example

<div class="btn-group mr-2">
  <button type="button" class="btn btn-primary">
    <i class="fa fa-bold"></i>
  </button>
  <button type="button" class="btn btn-primary">
    <i class="fa fa-italic"></i>
  </button>
  <button type="button" class="btn btn-primary">
    <i class="fa fa-underline"></i>
  </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-align-justify"></i>
  </button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">
    <i class="fa fa-undo"></i>
  </button>
  <button type="button" class="btn btn-primary">
    <i class="fa fa-copy"></i>
  </button>
</div>
▶ Run the code

Conclusion

Bootstrap provides a set of components that can be used to build a wide range of web applications. One of the many components is creating a button group. The button groups are a group of buttons that appear horizontally or vertically stacked.

Points to remember:

  1. To create a button group just wrap your buttons with .btn classes by a div element and add .btn-group class to it.
  2. To create a vertical button group replace .btn-group with .btn-group-vertical.
  3. You can also nest a group element into one another.