Bootstrap Button Group
A Button group is an easy way to group a series of buttons together. Bootstrap allows to group a series of buttons within a single line or place them in a vertical stack. This button group is used to place multiple buttons with different functions within a webpage. Let's understand how to create a button group.
- Wrap a series of buttons within the .btn-group class
- Add .btn class within <button> tag to add each button.
- We can add customized buttons with a button utility class.
- To convey to screen readers that the button is grouped, the button groups are provided with role=group.
- The button group should also be provided with explicit labels within the aria-label or aria-labelledby attribute.
Example: Creating a group of buttons
So lets us create a series of buttons using the button group class of bootstap5.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<h2> Button Group </h2>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-danger">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</body>
</html>
Output:
Here is the output of the above program
Checkbox and radio button groups
A button group can act as a checkbox as well as radio buttons. Let's see how we can add a checkbox and radio button functionality to a button group.
- Add <input>s and <label>s element within the button group class.
- Within <input> add type="checkbox" for checkbox and for radio buttons use type="radio"
- Also add .btn-check class within <input> element.
- id is added to the <input> element with some unique name.
- In addition to that radio button has a name attribute within <input> where we can assign some names to the radio buttons. Remember to keep it the same for all radio buttons.
- <label> element consist .btn class customized with some button utility class and for attribute pointing to the id attribute.
Example: Adding checkbox and radio button to button group class
Here, we have added checkboxes and radio buttons to the button group class. The buttons have been customized with the .btn-outline class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<h2> Checkbox using button group </h2>
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
<h2> Radio buttons using button group </h2>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Button Toolbar
The series of buttons can also be used as a toolbar for some more complex functions using button groups. Button toolbar should be included within the .button-toolbar class and role should be assigned with role=toolbar.
Example: Creating a button toolbar using the button group
As stated above the .btn-group class can be added within the .btn-toolbar to create a button toolbar. You can add a button utility class to customize these buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<h2> Button group as toolbar </h2>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-secondary">5</button>
<button type="button" class="btn btn-outline-secondary">6</button>
<button type="button" class="btn btn-outline-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-danger">8</button>
</div>
</div>
</body>
</html>
Output:
Nesting Button Group
The button group can be nested within another button group. The dropdown menu can be used within the nested button group.
Example: Creating nested button group
To create a nested button group, use .btn-group class within the parent button group. For adding dropdown use .dropdown-menu class within .btn-group class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<h2> Nesting Button Group </h2>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Vertical Button group
We can also create a vertical button group by using the .btn-group-vertical class to add vertical button groups.
Example: Creating Vertical button group
Here, we have added a dropdown menu within the vertical group class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<h2> Vertical Button Group </h2>
<div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-primary">Button 2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<button type="button" class="btn btn-primary">Button 3</button>
<button type="button" class="btn btn-primary">Button 4</button>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
Bootstrap provides a wide range of usability with its button group class. Each button within the button group can be styled using button utility classes like button colors, outline colors, and button size. Button group class can also be used as a toolbar. Create a vertical button group to align it vertically. You have so much to do with the button groups class.
