Bootstrap 3 Button Group

Bootstrap allows you to group a series of buttons together in a single line. Use a <div> element with class ".btn-group" to create a button group:

Example 1: btn-group

<div class="btn-group">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <button type="button" class="btn btn-danger">Contact</button>
</div>

Button group size

Instead of applying button sizes to every button in a group, use class .btn-group-lg or .btn-group-sm in a group or groups.

Example 2: btn-group-lg

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <button type="button" class="btn btn-danger">Contact</button>
</div>

Example 3: Default btn-group

<div class="btn-group">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <button type="button" class="btn btn-danger">Contact</button>
</div>

Example 4: btn-group-sm

<div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <button type="button" class="btn btn-danger">Contact</button>
</div>

Vertical Button Groups

To create a vertical button group, use Bootstrap class ".btn-group-vertical".

<div class="btn-group-vertical">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <button type="button" class="btn btn-danger">Contact</button>
</div>

Justified Button Groups

To fit the buttons in entire width of the screen, use ".btn-group-justified" class.

Example: Button Group using <a> tag.

<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-danger">Home</a>
    <a href="#" class="btn btn-danger">About</a>
    <a href="#" class="btn btn-danger">Contact</a>
</div>

Example: Button Group using <button> tag.

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

        <a href="#" class="btn btn-danger">Home</a>
    </div>
    <div class="btn-group">
        <a href="#" class="btn btn-danger">About</a>
    </div>
    <div class="btn-group">
        <a href="#" class="btn btn-danger">Contact</a>
    </div>
</div>

Dropdown Menus

<div class="btn-group">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <div class="btn-group">
    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    Course <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JS</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>
</div>

Split Dropdown Button

<div class="btn-group">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <button type="button" class="btn btn-danger">Course</button>
    <div class="btn-group">
    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Our Work</a></li>
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">More..</a></li>
        </ul>
    </div>
</div>

Dropdown Button with Divider

<ul class="dropdown-menu">
    <li><a href="#">Our Work</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Contact</a></li>
    <li class="divider"></li>
    <li><a href="#">More..</a></li>
</ul>

Dropdown Header

<ul class="dropdown-menu">
    <li class="dropdown-header">HTML</li>
    <li><a href="#">HTML 4</a></li>
    <li><a href="#">HTML 5</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">CSS</li>
    <li><a href="#">CSS 1</a></li>
    <li><a href="#">CSS 2</a></li>
    <li><a href="#">CSS 3</a></li>
</ul>

Drop up

<div class="btn-group">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <div class="btn-group dropup">
    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Course <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JS</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>
</div>