Button groups
Button groups join related buttons into one connected bar.
In this page:
Syntax
<div class="btn-group" role="group" aria-label="label">
<button class="btn btn-primary">one</button>
<button class="btn btn-primary">two</button>
</div>Button groups
Wrap buttons in .btn-group with role="group" and an aria-label. Use .btn-group-vertical to stack them and .btn-toolbar to combine several groups. Radio and checkbox toggles with .btn-check render as button groups too.
Note:
Always add role="group" and an aria-label for accessibility.
Example: Button 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="btn-group mb-3" role="group" aria-label="Text alignment">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary active">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
<div class="btn-group-vertical d-block" role="group" aria-label="Vertical group" style="width:8rem">
<button type="button" class="btn btn-secondary">Top</button>
<button type="button" class="btn btn-secondary">Bottom</button>
</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Forgetting role and aria-label
- Nesting groups incorrectly
- Using groups for unrelated buttons
Chapter Summary
- .btn-group joins buttons
- role="group" and aria-label
- btn-group-vertical stacks
- btn-toolbar combines groups
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: