Bootstrap 3 Button groups

  • Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin

Basic example

Wrap a series of buttons with .btn in .btn-group.

Example
    
        <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>  
        </div>
    

Button toolbar

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

Example
    
        <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>  
        </div>
    

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including when nesting multiple groups.

Example



    
        <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>  
        </div>
    

Nesting

Example
    
        <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">1</button>
                <button type="button" class="btn btn-default">2</button>

                <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown
                                <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                                <li><a href="#">Dropdown link</a></li>
                                <li><a href="#">Dropdown link</a></li>
                        </ul>
                </div>
        </div>
    

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally.

Example
    
        <div class="btn-group-vertical" role="group" aria-label="...">
                ...
        </div>
    

Justified button groups

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

With <a> elements

Just wrap a series of .btns in .btn-group.btn-group-justified.

    
        <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>  
        </div>
    

Copyright 2016 by WebiBeris.com. All Rights Reserved.