Welcome to The Coding College! In this tutorial, we’ll explore Bootstrap 4 Button Groups, an essential feature for creating visually appealing and functional grouped buttons. Button groups allow you to align and organize multiple buttons together for tasks like toolbars, navigation, or grouped actions.
By the end of this guide, you’ll know how to create, customize, and use button groups effectively in your Bootstrap 4 projects.
What Are Bootstrap 4 Button Groups?
A button group is a container that groups multiple buttons together in a horizontal or vertical layout. It’s commonly used for creating toolbars, segmented controls, or menus. Bootstrap provides a simple way to implement these groups using the .btn-group class.
Basic Button Group
To create a basic button group, wrap multiple buttons inside a <div> element with the .btn-group class.
Example:
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div> Explanation:
.btn-group: Groups the buttons together.role="group": Adds accessibility by identifying the group as a single control.
Button Group Sizes
Button groups can be resized using the following classes:
.btn-group-lg: Large button group.btn-group-sm: Small button group
Example:
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-primary">Large Left</button>
<button type="button" class="btn btn-secondary">Large Middle</button>
<button type="button" class="btn btn-success">Large Right</button>
</div>
<div class="btn-group btn-group-sm mt-3" role="group">
<button type="button" class="btn btn-primary">Small Left</button>
<button type="button" class="btn btn-secondary">Small Middle</button>
<button type="button" class="btn btn-success">Small Right</button>
</div> Vertical Button Group
To stack buttons vertically, use the .btn-group-vertical class.
Example:
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-secondary">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div> Button Toolbar
You can group multiple button groups together to create a toolbar. Use the .btn-toolbar class for this purpose.
Example:
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-success">3</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-danger">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-info">C</button>
</div>
</div> Button Group with Dropdowns
Button groups can include dropdown menus by adding a dropdown to one or more buttons.
Example:
<div class="btn-group" role="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 type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
<a class="dropdown-item" href="#">Action 3</a>
</div>
</div>
</div> Justified Button Groups
To make buttons in a group span the full width of their container, use the .btn-group inside a .btn-group-justified wrapper.
Example:
<div class="btn-group btn-group-justified" role="group" style="width: 100%;">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div> Button Group Accessibility
Bootstrap 4 button groups are designed with accessibility in mind. Use the aria-label attribute to describe the group’s purpose.
Example:
<div class="btn-group" role="group" aria-label="Navigation controls">
<button type="button" class="btn btn-primary">Previous</button>
<button type="button" class="btn btn-secondary">Next</button>
</div> Practical Example: Button Group for Navigation
Here’s a practical example of a button group used as navigation controls:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Button Groups</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container my-5">
<h1 class="text-center text-primary">Bootstrap 4 Button Groups</h1>
<!-- Basic Button Group -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
<!-- Vertical Button Group -->
<h3 class="mt-4">Vertical Button Group</h3>
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-secondary">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> Learn More with The Coding College
Bootstrap 4 Button Groups are a versatile tool for organizing buttons in a compact and user-friendly way. At The Coding College, we’re here to guide you through mastering Bootstrap and other web development technologies with easy-to-follow tutorials.