0
0
Bootsrapmarkup~5 mins

Button groups in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Button groups let you put several buttons side by side as one unit. This helps keep your page tidy and easy to use.

When you want to show multiple related actions together, like text formatting options (bold, italic, underline).
When you need a set of buttons that act like choices, such as selecting a size or color.
When you want to save space by grouping buttons instead of spreading them out.
When you want consistent spacing and alignment for buttons in toolbars or forms.
Syntax
Bootsrap
<div class="btn-group" role="group" aria-label="Button group 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>

The btn-group class wraps the buttons to group them.

Use role="group" and aria-label for accessibility so screen readers understand the group.

Examples
A simple button group with three buttons using the secondary color style.
Bootsrap
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">One</button>
  <button type="button" class="btn btn-secondary">Two</button>
  <button type="button" class="btn btn-secondary">Three</button>
</div>
A large sized button group with two green buttons.
Bootsrap
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  <button type="button" class="btn btn-success">Left</button>
  <button type="button" class="btn btn-success">Right</button>
</div>
A vertical button group stacking buttons up and down instead of side by side.
Bootsrap
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-info">Top</button>
  <button type="button" class="btn btn-info">Middle</button>
  <button type="button" class="btn btn-info">Bottom</button>
</div>
Sample Program

This page shows a simple horizontal button group with three blue buttons labeled Left, Middle, and Right.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Button Group Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="p-4">
    <h1>Button Group Demo</h1>
    <p>Here is a group of three buttons side by side:</p>
    <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>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OutputSuccess
Important Notes

Button groups keep buttons connected visually and functionally.

Always add aria-label to describe the group for screen readers.

You can make groups vertical by using btn-group-vertical instead of btn-group.

Summary

Button groups let you put buttons side by side as one unit.

Use btn-group class and add accessibility roles and labels.

You can change size and orientation with extra classes like btn-group-lg or btn-group-vertical.