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 5.
Bootstrap 5 Button Group Tutorial
This tutorial covers the following the chapters:
- Creating horizontal button group
- Button group toolbar
- Sizing of button groups
- Nested button group with dropdown
- Vertical button group
- 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 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" 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 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>The “role” and “aria-label” are optional mainly used from accessibility point of view on screen readers.
This will produce the following result in the browser.
Above code is full template code using CDN CSS and script links. You can simply replace the block between start and end of button group with the code given in the below examples to create and test different button group styles..
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:
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.
3. Different Sizing of Button Groups
Bootstrap 5 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:
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:
5. 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:
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:
Note that the split buttons are not supported in vertical nesting.
Leave a Reply
Your email is safe with us.