Bootstrap Buttons Group

❮ Prev Next ❯

In this tutorial, you will learn how to create an HTML button group using bootstrap. You will know how to align these buttons vertically, create a button group with a dropdown menu, and many more.

Bootstrap Button Group

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

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

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>

Try It

Button Group Size

You can increase or decrease the size of these HTML button group by adding btn-group-lg or btn-group-sm class to the button group div element.

You can apply these classes to the div element if you want to apply it to all buttons in the group or you can also use it for 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>

Try It

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 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>

Try It

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>

Try It

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>

Try It

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>

Try It

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:

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

❮ Prev Next ❯