Bootstrap Button Groups

A button group combines two or more Bootstrap buttons into one connected visual unit.

<div class="btn-group">

    <button class="btn btn-primary">Home</button>
    <button class="btn btn-primary">About</button>
    <button class="btn btn-primary">Contact</button>

</div>

The .btn-group class is the main class used to create a horizontal button group.

<div class="btn-group">
    ...
</div>

Each button inside the group should normally use the .btn class together with a contextual button class.

Here is a simple three-button group.

<div class="btn-group">

    <button class="btn btn-primary">One</button>
    <button class="btn btn-primary">Two</button>
    <button class="btn btn-primary">Three</button>

</div>

Buttons in a group do not have to use the same contextual class.

<div class="btn-group">

    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-danger">Danger</button>

</div>

Outline button classes can also be used inside a button group.

<div class="btn-group">

    <button class="btn btn-outline-primary">Home</button>
    <button class="btn btn-outline-primary">About</button>
    <button class="btn btn-outline-primary">Contact</button>

</div>

A button group can contain only two buttons.

<div class="btn-group">

    <button class="btn btn-primary">Yes</button>
    <button class="btn btn-secondary">No</button>

</div>

Button groups can be useful for simple navigation controls.

<div class="btn-group">

    <a href="#" class="btn btn-primary">Home</a>
    <a href="#" class="btn btn-primary">Services</a>
    <a href="#" class="btn btn-primary">Contact</a>

</div>

Use .btn-group-vertical when buttons should appear one below another.

<div class="btn-group-vertical">

    <button class="btn btn-primary">Home</button>
    <button class="btn btn-primary">About</button>
    <button class="btn btn-primary">Contact</button>

</div>

Vertical button groups can also contain different button styles.

<div class="btn-group-vertical">

    <button class="btn btn-primary">View</button>
    <button class="btn btn-warning">Edit</button>
    <button class="btn btn-danger">Delete</button>

</div>

Bootstrap provides button group size classes such as .btn-group-lg and .btn-group-sm.

<div class="btn-group btn-group-lg">
    <button class="btn btn-primary">Large</button>
    <button class="btn btn-primary">Buttons</button>
</div>

Use .btn-group-sm to create a smaller button group.

<div class="btn-group btn-group-sm">

    <button class="btn btn-primary">Edit</button>
    <button class="btn btn-danger">Delete</button>

</div>

If no size class is specified, Bootstrap uses the normal button group size.

<div class="btn-group">

    <button class="btn btn-primary">Normal</button>
    <button class="btn btn-primary">Size</button>

</div>

Anchor elements can also be used inside button groups.

<div class="btn-group">

    <a href="#" class="btn btn-primary">Home</a>
    <a href="#" class="btn btn-primary">Products</a>
    <a href="#" class="btn btn-primary">Contact</a>

</div>

Button groups can be used to create visually connected radio-style controls.

<div class="btn-group" role="group">

    <input type="radio"
    class="btn-check"
    name="options"
    id="option1"
    autocomplete="off"
    checked>

    <label class="btn btn-outline-primary"
    for="option1">
    Option 1
    </label>

</div>

Bootstrap can also style checkbox inputs as buttons using .btn-check.

<input type="checkbox"
class="btn-check"
id="check1"
autocomplete="off">

<label class="btn btn-outline-success"
for="check1">
HTML
</label>

When grouping related controls, Bootstrap documentation commonly uses role="group" to communicate that the controls form a logical group.

<div class="btn-group"
role="group"
aria-label="Basic example">

    <button class="btn btn-primary">
    One
    </button>

    <button class="btn btn-primary">
    Two
    </button>

</div>

An aria-label can provide an accessible name for a button group when a visible label is not available.

<div class="btn-group"
role="group"
aria-label="Text alignment">

    <button class="btn btn-primary">
    Left
    </button>

    <button class="btn btn-primary">
    Center
    </button>

    <button class="btn btn-primary">
    Right
    </button>

</div>

Icons or symbols can be placed inside grouped buttons to make actions easier to identify.

<div class="btn-group">

    <button class="btn btn-primary">←</button>
    <button class="btn btn-primary">Home</button>
    <button class="btn btn-primary">→</button>

</div>

Button groups are commonly used inside Bootstrap cards.

<div class="card">

    <div class="card-body">

        <h5>Student Profile</h5>

        <div class="btn-group">

            <button class="btn btn-primary">
            View
            </button>

            <button class="btn btn-warning">
            Edit
            </button>

        </div>

    </div>

</div>

Button groups are very useful for action buttons inside tables.

<div class="btn-group btn-group-sm">

    <button class="btn btn-primary">
    View
    </button>

    <button class="btn btn-warning">
    Edit
    </button>

    <button class="btn btn-danger">
    Delete
    </button>

</div>

A dropdown can be combined with a button group to create more advanced controls.

<div class="btn-group">

    <button class="btn btn-primary">
    Action
    </button>

    <button type="button"
    class="btn btn-primary dropdown-toggle"
    data-bs-toggle="dropdown">
    </button>

    <ul class="dropdown-menu">
        <li>
        <a class="dropdown-item" href="#">
        Edit
        </a>
        </li>
    </ul>

</div>

A split button uses one main action button and a separate dropdown toggle.

<div class="btn-group">

    <button type="button"
    class="btn btn-success">
    Save
    </button>

    <button type="button"
    class="btn btn-success dropdown-toggle dropdown-toggle-split"
    data-bs-toggle="dropdown">
    </button>

</div>

Sometimes buttons should not be connected. In that case, use Bootstrap spacing utilities instead of .btn-group.

<button class="btn btn-primary me-2">
Save
</button>

<button class="btn btn-secondary">
Cancel
</button>

The me-2 class adds margin on the end side of the first button.

Button groups can be combined with Bootstrap's responsive utility classes to create layouts that adapt to different screen sizes.

<div class="btn-group">

    <button class="btn btn-primary">
    View
    </button>

    <button class="btn btn-success">
    Save
    </button>

    <button class="btn btn-danger">
    Delete
    </button>

</div>

For very small screens, test grouped controls carefully to make sure the buttons remain usable and readable.

A button group can be used to allow users to select text alignment.

<div class="btn-group"
role="group"
aria-label="Text alignment">

    <button class="btn btn-outline-primary">
    Left
    </button>

    <button class="btn btn-outline-primary">
    Center
    </button>

    <button class="btn btn-outline-primary">
    Right
    </button>

</div>

CRUD applications frequently use grouped buttons for View, Edit, and Delete operations.

<div class="btn-group">

    <a href="#" class="btn btn-primary">
    View
    </a>

    <a href="#" class="btn btn-warning">
    Edit
    </a>

    <a href="#" class="btn btn-danger">
    Delete
    </a>

</div>

When creating button groups, accessibility should also be considered.

• Group related actions logically.
• Use meaningful button labels.
• Use role="group" where appropriate.
• Use aria-label when a group needs an accessible name.
• Make sure buttons have sufficient visual contrast.
• Do not put unrelated actions into the same group.

Some common mistakes include:

• Using .btn-group for unrelated buttons.
• Forgetting the .btn class.
• Using too many buttons in a small space.
• Not testing the group on mobile screens.
• Using unclear button labels.

<!-- Good -->

<div class="btn-group">
    <button class="btn btn-primary">
    View
    </button>

    <button class="btn btn-warning">
    Edit
    </button>
</div>

Here is a practical example of a button group that can be used in an admin panel.

<div class="btn-group"
role="group"
aria-label="Student actions">

    <a href="view.php"
    class="btn btn-primary">
    View
    </a>

    <a href="edit.php"
    class="btn btn-warning">
    Edit
    </a>

    <a href="delete.php"
    class="btn btn-danger">
    Delete
    </a>

</div>

The following example combines button groups, outline buttons, different actions, and accessibility attributes.

<div class="container mt-4">

    <h3>Student Management</h3>

    <div class="btn-group"
    role="group"
    aria-label="Student management actions">

        <button class="btn btn-primary">
        Add
        </button>

        <button class="btn btn-success">
        Save
        </button>

        <button class="btn btn-warning">
        Edit
        </button>

        <button class="btn btn-danger">
        Delete
        </button>

    </div>

</div>