Bootstrap Button Groups
A button group joins a series of buttons into a single, connected control, which is perfect for toolbars, view switchers, and paginated actions. In this lesson you will learn how to build a button group, stack it vertically, change its size, combine groups into a toolbar, and mix in dropdowns.
Creating a button group
Wrap a set of buttons in a <div> with the .btn-group class. Bootstrap removes the gaps between them and rounds only the outer corners so they look like one connected control. Add role="group" and an aria-label to describe the group.
A basic button group
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<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-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Sizing the whole group
Instead of sizing each button, add .btn-group-lg or .btn-group-sm to the wrapper to resize every button in the group at once.
Large and small groups
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="btn-group btn-group-lg" role="group" aria-label="Large">
<button type="button" class="btn btn-outline-secondary">Big</button>
<button type="button" class="btn btn-outline-secondary">Buttons</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Small">
<button type="button" class="btn btn-outline-secondary">Tiny</button>
<button type="button" class="btn btn-outline-secondary">Buttons</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Vertical button groups
Swap .btn-group for .btn-group-vertical to stack the buttons on top of each other instead of side by side. This is handy for narrow sidebars.
A vertical group
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="btn-group-vertical" role="group" aria-label="Vertical">
<button type="button" class="btn btn-primary">Top</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Bottom</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Toolbars
To combine several button groups into one control bar, wrap them in a <div> with the .btn-toolbar class. Use spacing utilities such as .ms-2 to add a gap between the groups.
A button toolbar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
</div>
<div class="btn-group" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">A</button>
<button type="button" class="btn btn-secondary">B</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>When to reach for a button group
Button groups keep related actions visually tied together, which makes toolbars and choice controls easier for users to scan and use.
