Sign in


Sign up


Bootstrap Button Group

Bootstrap button groups are buttons grouped together in a single line with no space between them. They can be grouped both vertically and horizontally.

This solution allows you to put a number of options the users can choose from.

Examples of Bootstrap button group use:

  • Group of pricing options
  • Group of licenses you can see on our MDB Pro page

See the following button groups examples:


Basic example

                
<div class="btn-group" role="group" aria-label="Basic example">
    <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>
                
            

Button toolbar

                
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
        <button type="button" class="btn btn-default">3</button>
        <button type="button" class="btn btn-default">4</button>
    </div>
    <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-default">5</button>
        <button type="button" class="btn btn-default">6</button>
        <button type="button" class="btn btn-default">7</button>
    </div>
    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-default">8</button>
    </div>
</div>
                
            

Button group sizing

                
.btn-group-lg .btn, .btn-group-sm .btn {
    border-radius: 2px;
}
                
            
                
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-unique btn-lg">Left</button>
    <button type="button" class="btn btn-unique btn-lg">Middle</button>
    <button type="button" class="btn btn-unique btn-lg">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-unique">Left</button>
    <button type="button" class="btn btn-unique">Middle</button>
    <button type="button" class="btn btn-unique">Right</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-unique btn-sm">Left</button>
    <button type="button" class="btn btn-unique btn-sm">Middle</button>
    <button type="button" class="btn btn-unique btn-sm">Right</button>
</div>
                
            

Button group nesting

                
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-info">1</button>
    <button type="button" class="btn btn-info">2</button>
    <div class="btn-group" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <a class="dropdown-item" href="#">Dropdown link</a>
            <a class="dropdown-item" href="#">Dropdown link</a>
        </div>
    </div>
</div>
                
            

Button group vertical variation

                
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
    <button type="button" class="btn btn-amber ml-0">Button</button>
    <button type="button" class="btn btn-amber">Button</button>
    <button type="button" class="btn btn-amber">Button</button>
    <button type="button" class="btn btn-amber">Button</button>
    <button type="button" class="btn btn-amber">Button</button>
    <button type="button" class="btn btn-amber">Button</button>
</div>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
    <button type="button" class="btn btn-indigo ml-0">Button</button>
    <button type="button" class="btn btn-indigo">Button</button>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-indigo dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
            <a class="dropdown-item" href="#">Dropdown link</a>
            <a class="dropdown-item" href="#">Dropdown link</a>
        </div>
    </div>
    <button type="button" class="btn btn-indigo">Button</button>
    <button type="button" class="btn btn-indigo">Button</button>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-indigo dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
            <a class="dropdown-item" href="#">Dropdown link</a>
            <a class="dropdown-item" href="#">Dropdown link</a>
        </div>
    </div>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop3" type="button" class="btn btn-indigo dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
            <a class="dropdown-item" href="#">Dropdown link</a>
            <a class="dropdown-item" href="#">Dropdown link</a>
        </div>
    </div>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop4" type="button" class="btn btn-indigo dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
            <a class="dropdown-item" href="#">Dropdown link</a>
            <a class="dropdown-item" href="#">Dropdown link</a>
        </div>
    </div>
</div>
                
            

Checkbox and radio button group MDB Pro component

                
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-mdb-color active">
        <input type="checkbox" checked autocomplete="off"> Pre-checked
    </label>
    <label class="btn btn-mdb-color">
        <input type="checkbox" autocomplete="off"> Check
    </label>
    <label class="btn btn-mdb-color">
        <input type="checkbox" autocomplete="off"> Check
    </label>
</div>
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-light-blue active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Preselected
    </label>
    <label class="btn btn-light-blue">
        <input type="radio" name="options" id="option2" autocomplete="off"> Radio
    </label>
    <label class="btn btn-light-blue">
        <input type="radio" name="options" id="option3" autocomplete="off"> Radio
    </label>
</div>
                
            

Rounded button group MDB Pro component

                
.btn .fa.fa-sm {
    font-size: 1rem;
    margin-top: -5px;
}
                
            
                
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-pink btn-rounded">Left</button>
    <button type="button" class="btn btn-pink btn-rounded">Middle</button>
    <button type="button" class="btn btn-pink btn-rounded">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn purple-gradient btn-rounded">Left</button>
    <button type="button" class="btn purple-gradient btn-rounded">Middle</button>
    <button type="button" class="btn purple-gradient btn-rounded">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-purple btn-rounded"><i class="fa fa-star fa-sm pr-2" aria-hidden="true"></i> Left</button>
    <button type="button" class="btn btn-purple btn-rounded"><i class="fa fa-heart fa-sm pr-2" aria-hidden="true"></i>Middle</button>
    <button type="button" class="btn btn-purple btn-rounded"><i class="fa fa-user fa-sm pr-2" aria-hidden="true"></i>Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-deep-purple btn-rounded waves-effect"><i class="fa fa-anchor fa-sm pr-2" aria-hidden="true"></i> Left</button>
    <button type="button" class="btn btn-outline-deep-purple btn-rounded waves-effect"><i class="fa fa-sun-o fa-sm pr-2" aria-hidden="true"></i>Middle</button>
    <button type="button" class="btn btn-outline-deep-purple btn-rounded waves-effect"><i class="fa fa-user-secret fa-sm pr-2" aria-hidden="true"></i>Right</button>
</div>
                
            

Additional button group MDB Pro component

                
.btn .fa.fa-sm {
    font-size: 1rem;
    margin-top: -5px;
}
                
            
                
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-cyan">Left</button>
    <button type="button" class="btn btn-cyan">Middle</button>
    <button type="button" class="btn btn-cyan">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn aqua-gradient">Left</button>
    <button type="button" class="btn aqua-gradient">Middle</button>
    <button type="button" class="btn aqua-gradient">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-indigo"><i class="fa fa-instagram fa-sm pr-2" aria-hidden="true"></i> Left</button>
    <button type="button" class="btn btn-indigo"><i class="fa fa-twitter fa-sm pr-2" aria-hidden="true"></i>Middle</button>
    <button type="button" class="btn btn-indigo"><i class="fa fa-snapchat-ghost fa-sm pr-2" aria-hidden="true"></i>Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-mdb-color waves-effect"><i class="fa fa-car fa-sm pr-2" aria-hidden="true"></i> Left</button>
    <button type="button" class="btn btn-outline-mdb-color waves-effect"><i class="fa fa-plane fa-sm pr-2" aria-hidden="true"></i>Middle</button>
    <button type="button" class="btn btn-outline-mdb-color waves-effect"><i class="fa fa-train fa-sm pr-2" aria-hidden="true"></i>Right</button>
</div>
                
            

Multicolored button group

                
<div class="btn-group btn-group-lg mb-r" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary btn-lg">Left</button>
    <button type="button" class="btn btn-warning btn-lg">Middle</button>
    <button type="button" class="btn btn-danger btn-lg">Right</button>
</div>
<div class="btn-group mb-r" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-warning">Middle</button>
    <button type="button" class="btn btn-danger">Right</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary btn-sm">Left</button>
    <button type="button" class="btn btn-warning btn-sm">Middle</button>
    <button type="button" class="btn btn-danger btn-sm">Right</button>
</div>

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
    <button type="button" class="btn btn-primary ml-0">Button</button>
    <button type="button" class="btn btn-pink">Button</button>
    <button type="button" class="btn btn-success">Button</button>
    <button type="button" class="btn btn-amber">Button</button>
    <button type="button" class="btn btn-red">Button</button>
</div>

<div class="btn-toolbar mb-r" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn mdb-color lighten-2">1</button>
        <button type="button" class="btn indigo lighten-2">2</button>
        <button type="button" class="btn blue lighten-2">3</button>
        <button type="button" class="btn light-blue lighten-2">4</button>
        <button type="button" class="btn cyan lighten-2">5</button>
    </div>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn indigo lighten-2"><i class="fa fa-star" aria-hidden="true"></i></button>
        <button type="button" class="btn blue lighten-2"><i class="fa fa-heart" aria-hidden="true"></i></button>
        <button type="button" class="btn light-blue lighten-2"><i class="fa fa-user" aria-hidden="true"></i></button>
        <button type="button" class="btn cyan lighten-2"><i class="fa fa-twitter" aria-hidden="true"></i></button>
    </div>
</div>