Bootstrap 4 Button Groups


Basic Button Groups

The .btn-group class is used to organize multiple buttons together in bootstrap. To use it, you have to write it in a <div> class. The following example illustrates a button group.

Example code

<div class="btn-group">
<button class="btn btn-primary">Home</button>
<button class="btn btn-primary">Link 1</button>
<button class="btn btn-primary">Link 2</button>
</div>

Vertical Button Groups

We need to use the .btn-group-vertical class to sort the button groups vertically in bootstrap. The following example refers to a vertical button groups.

Example code

<div class="btn-group-vertical">
<button class="btn btn-primary">Home</button>
<button class="btn btn-primary">Link 1</button>
<button class="btn btn-primary">Link 2</button>
</div>

Button Groups Sizes

There are also three sizes of bootstrap button groups. They are: -

The following example shows the size of these three button groups:

Large Button Groups
Medium/Default Button Groups
Small Button Groups

Example code

<h5 class="pt-2 pb-2">Large Button Groups</h5>
<div class="btn-group btn-group-lg">
<button class="btn btn-primary">Home</button>
<button class="btn btn-primary">Link 1</button>
<button class="btn btn-primary">Link 2</button>
</div>
<h5 class="pt-2 pb-2">Medium/Default Button Groups</h5>
<div class="btn-group">
<button class="btn btn-primary">Home</button>
<button class="btn btn-primary">Link 1</button>
<button class="btn btn-primary">Link 2</button>
</div>
<h5 class="pt-2 pb-2">Small Button Groups</h5>
<div class="btn-group btn-group-sm">
<button class="btn btn-primary">Home</button>
<button class="btn btn-primary">Link 1</button>
<button class="btn btn-primary">Link 2</button>
</div>

Button Groups With Dropdown

Dropdown can be added to button groups in bootstrap. To do this we need to add the .dropdown-menu class. We will learn about dropdown later in this chapter.

Example code

<div class="btn-group">
<button class="btn btn-primary">Home</button>
<button class="btn btn-primary">Link 1</button>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Link 2</button>
<div class="dropdown-menu">
<button class="dropdown-item btn btn-primary">Link 3</button>
<button class="dropdown-item btn btn-primary">Link 4</button>
<button class="dropdown-item btn btn-primary">Link 5</button>
</div>
</div>
</div>

Vertical Button Groups With Dropdown

Dropdown can be added to vertical button groups in bootstrap. To do this we need to add the .dropdown-menu class. We will learn about dropdown later in this chapter.

Example code

<div class="btn-group-vertical">
<button class="btn btn-primary">Home</button>
<button class="btn btn-primary">Link 1</button>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Link 2</button>
<div class="dropdown-menu">
<button class="dropdown-item btn btn-primary">Link 3</button>
<button class="dropdown-item btn btn-primary">Link 4</button>
<button class="dropdown-item btn btn-primary">Link 5</button>
</div>
</div>
</div>

Button Groups Side by Side

Multiple button groups can be placed side by side on the bootstrap. For that, we have to create the same button groups as we do.

Example code

<div class="btn-group">
<button class="btn btn-primary">Home</button>
<button class="btn btn-primary">Link 1</button>
<button class="btn btn-primary">Link 2</button>
</div>
<div class="btn-group">
<button class="btn btn-primary">Home</button>
<button class="btn btn-primary">Link 1</button>
<button class="btn btn-primary">Link 2</button>
</div>