Prev Next

BS5 Button Groups

Bootstrap 5 Button Groups allow you to group multiple buttons together on a single line or stack them vertically for organized layouts.

Key Topics

Basic Button Group

Use the .btn-group class to group buttons together horizontally.

<div class="btn-group" role="group">
    <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>

Explanation: The .btn-group class groups buttons horizontally, maintaining equal spacing between them.

Vertical Button Group

Add the .btn-group-vertical class to stack buttons vertically instead of horizontally.

<div class="btn-group-vertical" role="group">
    <button type="button" class="btn btn-secondary">Top</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Bottom</button>
</div>

Explanation: Vertical groups are useful for menus or side navigation.

Button Toolbar

Use .btn-toolbar to group multiple button groups together.

<div class="btn-toolbar" role="toolbar">
    <div class="btn-group me-2" role="group">
        <button type="button" class="btn btn-light">1</button>
        <button type="button" class="btn btn-light">2</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-dark">A</button>
        <button type="button" class="btn btn-dark">B</button>
    </div>
</div>

Explanation: The .btn-toolbar class creates a container for managing multiple button groups side by side.

Complete Button Group Example

Here is a full implementation showcasing button groups, vertical stacking, and toolbars.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Button Groups Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Button Groups</h2>

        <h3>Basic Button Group</h3>
        <div class="btn-group" role="group">
            <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>

        <h3>Vertical Button Group</h3>
        <div class="btn-group-vertical" role="group">
            <button type="button" class="btn btn-secondary">Top</button>
            <button type="button" class="btn btn-secondary">Middle</button>
            <button type="button" class="btn btn-secondary">Bottom</button>
        </div>

        <h3>Button Toolbar</h3>
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group me-2" role="group">
                <button type="button" class="btn btn-light">1</button>
                <button type="button" class="btn btn-light">2</button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-dark">A</button>
                <button type="button" class="btn btn-dark">B</button>
            </div>
        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: The example demonstrates horizontal, vertical, and toolbar-style button groups in a responsive container.

Key Takeaways

  • .btn-group groups buttons horizontally with equal spacing.
  • Use .btn-group-vertical for stacked buttons.
  • .btn-toolbar combines multiple button groups in one container.
Prev Next