BootstrapHow-ToBeginner · 3 min read

How to Create Button Group in Bootstrap: Simple Guide

To create a button group in Bootstrap, wrap your buttons inside a container with the btn-group class. This groups buttons horizontally with consistent spacing and styling automatically.

📐

Syntax

Use a div with the class btn-group to wrap multiple button elements. Each button should have the class btn and a style class like btn-primary for color.

btn-group: Container that groups buttons horizontally.
btn: Base class for buttons.
btn-primary, btn-secondary, etc.: Color styles for buttons.

html

<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>

Output

Three horizontally grouped blue buttons labeled Left, Middle, Right with no gaps between them.

💻

Example

This example shows a simple button group with three buttons labeled Left, Middle, and Right. They share the same color and appear side by side with no space between them.

html

<!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>
  <div class="container mt-4">
    <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>
  </div>
</body>
</html>

Output

A webpage showing three blue buttons labeled Left, Middle, Right grouped horizontally with no gaps.

⚠️

Common Pitfalls

Common mistakes when creating button groups include:

Not wrapping buttons inside a btn-group container, causing buttons to appear separately.
Forgetting to add the btn class to each button, which breaks styling.
Mixing different button sizes or styles inside the same group without proper classes.
Not using role="group" and aria-label for accessibility.

html

<!-- Wrong: Buttons not grouped -->
<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>

<!-- Right: Buttons inside btn-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-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Output

First set: three separate blue buttons spaced apart. Second set: three blue buttons grouped horizontally with no gaps.

📊

Quick Reference

Summary tips for creating button groups in Bootstrap:

Wrap buttons in a div with btn-group class.
Use btn and color classes like btn-primary on each button.
Add role="group" and aria-label for accessibility.
Use btn-group-vertical for vertical groups.
Combine with btn-group-lg or btn-group-sm for size variations.

✅

Key Takeaways

Wrap buttons inside a container with the btn-group class to group them horizontally.

Each button needs the btn class plus a color style like btn-primary for consistent look.

Add role="group" and aria-label for better accessibility.

Use btn-group-vertical to stack buttons vertically if needed.

Avoid mixing button sizes or missing btn-group container to prevent layout issues.