Bootstrap 4 Button Group Tutorial

Button group as the name indicates is simply a group of buttons aligned together to showcase them as a single element. In our previous buttons tutorial we have explained how to create buttons with checkbox and radio buttons using button group concept. In this tutorial let us explain different types of button groups with examples in Bootstrap 4.

Bootstrap 4 Button Group Tutorial

This tutorial covers the following the chapters:

  1. Creating horizontal button group
  2. Button group toolbar
  3. Sizing of button groups
  4. Nested button group with dropdown
  5. Vertical button group
  6. Nested vertical button group

1. Horizontal Button Group

Horizontal button group is the simple form of grouping two or more buttons together. Let us create a button group of four buttons using “.btn-group” class with a div tag. Each button is using different contextual class to show it in different colors.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- Start of Button Group -->
<div class="btn-group" role="group" aria-label="Horizontal Button Group">
<button type="button" class="btn btn-primary">Button 1 </button>
<button type="button" class="btn btn-warning">Button 2</button>
<button type="button" class="btn btn-danger">Button 3</button>
<button type="button" class="btn btn-info">Button 4</button>
</div>
<!-- End of Button Group -->
<!-- Bootstrap 4 Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

The “role” and “aria-label” are optional mainly used from accessibility point of view on screen readers.

Related:  Maintenance Mode Page Layout for Weebly Site

This will produce the following result in the browser.

Horizontal Button Group

Above code is full template code using CDN CSS and script links. You can replace the block between start and end of button group with the code given in the below examples.

2. Button Group Toolbar

The grouping option allows you to have toolbar like arrangement by adding add role=”toolbar” attribute. You can also use button group along with input groups to create toolbars with text input. The sample code is given below:

<div class="btn-toolbar" role="toolbar" aria-label="Button Group Toolbar">
<div class="btn-group" role="group" aria-label="Button Group">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-info">C</button>
<button type="button" class="btn btn-success">D</button>
</div>
<div class="input-group">
<span class="input-group-addon" id="id1">@</span>
<input type="text" class="form-control" placeholder="This is input group box" aria-describedby="id1">
</div>
</div>

It will produce the following result on the browser:

Button Group Toolbar

As you can see the button group and input group elements do not have any gap. You should use custom CSS to add margin between these two elements to align them properly.

Offer: Get 92% discount of Mobirise Bootstrap site builder.

3. Different Sizing of Button Groups

Bootstrap 4 allows you to have three sizing classes for large (btn-group-lg), default and small (btn-group-sm). You can directly add large or small class to the “.btn-group” class to change the size.

<!-- Start of Large Button Group Size -->
<div class="btn-group btn-group-lg" role="group" aria-label="Large Button Group">
<button type="button" class="btn btn-primary">Large Button 1</button>
<button type="button" class="btn btn-warning">Large Button 2</button>
<button type="button" class="btn btn-danger">Large Button 3</button>
</div>
<!-- Start of Default Button Group Size -->
<div class="btn-group" role="group" aria-label="Default Button Group">
<button type="button" class="btn btn-primary">Default Button 1</button>
<button type="button" class="btn btn-warning">Default Button 2</button>
<button type="button" class="btn btn-danger">Default Button 3</button>
</div>
<!-- Start of Small Button Group Size -->
<div class="btn-group btn-group-sm" role="group" aria-label="Small Button Group">
<button type="button" class="btn btn-primary">Small Button 1</button>
<button type="button" class="btn btn-warning">Small Button 2</button>
<button type="button" class="btn btn-danger">Small Button 3</button>
</div>

The above code will produce the results as shown below:

Related:  How to Edit .htaccess File in WordPress?

Button Group Resizing

4. Creating Nested Button Groups with Dropdown

Nested button groups are easy to create by placing the “.btn-group” class inside another “.btn-group” class. In this way you can show few buttons and then a dropdown with additional links.

<div class="btn-group" role="group" aria-label="Nested Button Group">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<div class="btn-group" role="group">
<button id="nested1" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown 1
</button>
<div class="dropdown-menu" aria-labelledby="nested1">
<a class="dropdown-item text-danger" href="#">Dropdown Link 1</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-info" href="#">Dropdown Link 2</a>
</div>
</div>
</div>

The result should look like below:

Nested Button Group with Dropdown5. Vertical Button Groups

Buttons can be grouped vertically using “.vertical” class along with “.btn-group” class.

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

The result of the code should produce the below button group:

Vertical Button Group

6. Nested Vertical Button Group

Similar to horizontal nesting, vertical button groups can also be nested with dropdown.

<div class="btn-group-vertical" role="group" aria-label="Nested Button Group">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-secondary">Button 2</button>
<div class="btn-group" role="group">
<button id="nested2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown 1
</button>
<div class="dropdown-menu" aria-labelledby="nested2">
<a class="dropdown-item text-danger" href="#">Dropdown Link 1</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="#">Dropdown Link 2</a>
</div>
</div>
</div>

Below is how the result will look like:

Vertical Button Group with Dropdown

Note split buttons are not supported in vertical nesting.

Recommended Articles:

Leave a Comment