Bootstrap Button Groups

14 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Button Groups

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Button Group classes to create sets of connected buttons. Button groups are great for navigation, toolbars, or forms, and we’ll add images to make the examples pop.

What You’ll Learn

Creating a basic button group
Using vertical button groups
Adjusting group sizes
Combining button groups with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Button Groups

Bootstrap Button Groups use the btn-group class to join buttons together, removing gaps for a seamless look. You can style them with colors, sizes, or orientations (horizontal/vertical).

Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).

Step 2: Create a Basic Button Group

Start with a horizontal button group for navigation. Use this code:

<div class="container">
    <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>
</div>

Explanation:

container: Centers and constrains content.
btn-group: Groups buttons with no gaps.
btn btn-primary: Styles each button blue with standard padding.

This creates a row of connected blue buttons.

Step 3: Make a Vertical Button Group

For a stacked layout, use btn-group-vertical. Try this:

<div class="container">
    <div class="btn-group-vertical">
        <button class="btn btn-success">Save</button>
        <button class="btn btn-success">Edit</button>
        <button class="btn btn-success">Delete</button>
    </div>
</div>

Explanation:

btn-group-vertical: Stacks buttons vertically.
btn btn-success: Uses green for positive actions.

These buttons align in a column, ideal for forms.

Step 4: Adjust Button Group Sizes

Control size with btn-group-lg or btn-group-sm. Add this:

<div class="container">
    <div class="btn-group btn-group-lg mb-3">
        <button class="btn btn-info">Big Left</button>
        <button class="btn btn-info">Big Center</button>
        <button class="btn btn-info">Big Right</button>
    </div>
    <div class="btn-group btn-group-sm">
        <button class="btn btn-warning">Small Left</button>
        <button class="btn btn-warning">Small Center</button>
        <button class="btn btn-warning">Small Right</button>
    </div>
</div>

Explanation:

btn-group-lg: Makes a large button group.
btn-group-sm: Makes a small button group.
mb-3: Adds margin-bottom for spacing.
btn-info: Blue buttons; btn-warning: Yellow buttons.

This shows large and small button groups in different colors.

Step 5: Combine with an Image

Pair a button group with a dummy image for context. Use this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Choose an Action</h3>
            <div class="btn-group">
                <button class="btn btn-primary">View</button>
                <button class="btn btn-primary">Edit</button>
                <a href="#" class="btn btn-primary">Share</a>
            </div>
            <p class="mt-2">Select an option to continue.</p>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into buttons/text (8 units) and image (4 units).
btn-group with btn-primary: Creates a blue button group, including an <a> tag.
mt-2: Adds margin-top to the paragraph.
Uses a 200×150 green image for vibrancy.

The image adds visual appeal to the button group.

Final Code

Here’s a combined example with varied button groups and an image:

<div class="container">
    <div class="btn-group mb-3">
        <button class="btn btn-success">Start</button>
        <button class="btn btn-success">Pause</button>
        <button class="btn btn-success">Stop</button>
    </div>
    <div class="btn-group-vertical mb-3">
        <button class="btn btn-outline-info">Up</button>
        <button class="btn btn-outline-info">Down</button>
        <a href="#" class="btn btn-outline-info">Reset</a>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Manage Your Profile</h3>
            <div class="btn-group btn-group-lg">
                <button class="btn btn-primary">Edit</button>
                <button class="btn btn-primary">Save</button>
                <button class="btn btn-primary">Cancel</button>
            </div>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A horizontal green button group (Start, Pause, Stop).
A vertical outlined blue button group (Up, Down, Reset).
A large blue button group (Edit, Save, Cancel) next to a red image (250×150).
All button groups are responsive, stacking or adjusting for mobile, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Button Groups Docs for more options.
Try btn-group with checkboxes for form controls.
Combine with Bootstrap’s navbar for advanced menus.

Conclusion

You’ve mastered Bootstrap Button Groups! With classes like btn-group, btn-group-vertical, and btn-lg, plus striking images, you’ve created seamless, stylish button sets. Keep experimenting to enhance your webpages.