BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
SPONSORED LINKS
Advertisements

Bootstrap Button Groups

In this tutorial you will learn how to use Bootstrap button group component.

Creating Button Groups with Bootstrap

In the previous chapter you've learnt how to create different types of individual buttons and modify them with predefined classes. Bootstrap however, also allows you to group a series of buttons together in a single line through the button group component.

To create a button groups just wrap a series of buttons with .btn class in a <div> element and apply the class .btn-group on it, as demonstrated in the following example:

<div class="btn-group">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">About</button>
    <button type="button" class="btn btn-primary">Services</button>
</div>

— The output of the above example will look something like this:


Creating Button Toolbar

You can also combine sets of button groups together for creating more complex components like button toolbar. To create button toolbar just wrap sets of button groups in a <div> element and apply the class .btn-toolbar on it, as shown in the following example:

<div class="btn-group mr-2">
    <button type="button" class="btn btn-primary">
        <i class="fa fa-font"></i>
    </button>
    <button type="button" class="btn btn-primary">
        <i class="fa fa-bold"></i>
    </button>
    <button type="button" class="btn btn-primary">
        <i class="fa fa-italic"></i>
    </button>
</div>
<div class="btn-group mr-2">
    <button type="button" class="btn btn-primary">
        <i class="fa fa-align-left"></i>
    </button>
    <button type="button" class="btn btn-primary">
        <i class="fa fa-align-center"></i>
    </button>
    <button type="button" class="btn btn-primary">
        <i class="fa fa-align-right"></i>
    </button>
    <button type="button" class="btn btn-primary">
        <i class="fa fa-align-justify"></i>
    </button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-primary">
        <i class="fa fa-undo"></i>
    </button>
</div>

— The output of the above example will look something like this:


Height Sizing of Button Groups

Instead of applying button sizing classes to every button in a group, you can simply apply button group sizing classes like .btn-group-lg or .btn-group-sm directly to each .btn-group element to create larger or smaller button groups, as shown in the example below:

<div class="btn-group mb-2 btn-group-lg">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">About</button>
    <button type="button" class="btn btn-primary">Services</button>
</div>
<br>
<div class="btn-group mb-2">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">About</button>
    <button type="button" class="btn btn-primary">Services</button>
</div>
<br>
<div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">About</button>
    <button type="button" class="btn btn-primary">Services</button>
</div>

— The output of the above example will look something like this:


Nesting Button Groups

Button groups can also be nested. The following example demonstrates how to place a .btn-group within another .btn-group to create dropdown menus inside button groups.

<div class="btn-group">
    <a href="#" class="btn btn-primary">Home</a>
    <a href="#" class="btn btn-primary">About</a>
    <div class="btn-group">
        <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Services</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Web Design</a>
            <a class="dropdown-item" href="#">Web Development</a>
        </div>
    </div>
</div>

— The output of the above example will look something like this:


Vertically Stacked Button Groups

You can also make the button groups appear vertically stacked rather than horizontally. To do this just replace the class .btn-group with the .btn-group-vertical, like this:

<div class="btn-group-vertical">
    <a href="#" class="btn btn-primary">Home</a>
    <a href="#" class="btn btn-primary">About</a>
    <div class="btn-group">
        <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Services</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Web Design</a>
            <a class="dropdown-item" href="#">Web Development</a>
        </div>
    </div>
</div>

— The output of the above example will look something like this:


Creating Justified Button Groups

You can also stretch your button groups to fill all the available width by applying the flex utility class .d-flex to the .btn-group element. Every button has equal width in this case.

<div class="btn-group d-flex">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">About</button>
    <button type="button" class="btn btn-primary">Services</button>
</div>

— The output of the above example will look something like this:

The story doesn't ends here; in the advanced section you'll learn more about button dropdowns, as well as how create stateful buttons to enable radio or checkbox style toggling, and more.

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.