Button group

Bootstrap Button Group

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.

Examples of Bootstrap button group use:

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

Take a look at the following button groups examples:

Basic example

Wrap a series of buttons within the .btn-group. Add in optional JavaScript radio and checkbox style behavior with our buttons plugin.

Show code Edit in sandbox

HTML

        
            

        <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>

Ensure the correct role and provide a label

In order for assistive technologies (such as screen readers) to convey that a series of buttons are grouped, an appropriate role attribute needs to be provided. For button groups, this would be role="group", while toolbars should have a role="toolbar".

In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use aria-label, but alternatives such as aria-labelledby may also be used.

Button toolbar

You can also combine sets of button groups into button toolbars for more complex components. To do this, use utility classes as needed to space out groups, buttons, and more.

Show code Edit in sandbox

HTML

        
            

        <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>

Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.

Show code Edit in sandbox

HTML

        
            

        <!-- Grid row -->
    <div class="flex-row mb-3">

      <!-- Grid column -->

        <div class="btn-toolbar mb-3" 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="md-form input-group my-0">
            <div class="input-group-prepend">
              <div class="input-group-text md-addon" id="btnGroupAddon">@</div>
            </div>
            <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
          </div>
        </div>


      <!-- Grid column -->

    </div>
    <!-- Grid row -->

    <!-- Grid row -->
    <div class="flex-row mb-3">

      <!-- Grid column -->

        <div class="btn-toolbar d-flex" role="toolbar" aria-label="Toolbar with button groups">
          <div class="btn-group mr-auto mb-3 mb-md-0" role="group" aria-label="First group">
            <button type="button" class="btn btn-default p-demo-5">1</button>
            <button type="button" class="btn btn-default p-demo-5">2</button>
            <button type="button" class="btn btn-default p-demo-5">3</button>
            <button type="button" class="btn btn-default p-demo-5">4</button>
          </div>
          <div class="md-form input-group mb-3 my-0">
            <div class="input-group-prepend">
              <span class="input-group-text md-addon" id="material-addon1">@</span>
            </div>
            <input type="text" class="form-control" placeholder="Username" aria-label="Username"
              aria-describedby="material-addon1">
          </div>
        </div>

      <!-- Grid column -->

    </div>
    <!-- Grid row -->

Sizing

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

Show code Edit in sandbox

HTML

        
            

        <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>

        
            

        .btn-group-lg .btn, .btn-group-sm .btn {
        border-radius: 2px;
        }

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

Show code Edit in sandbox

HTML

        
            

        <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>

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

Show code Edit in sandbox

HTML

        
            

        <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
          <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>
          <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 ml-0">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 ml-0">Button</button>
          <button type="button" class="btn btn-indigo ml-0">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

Pre-checked Check Check

Preselected Radio Radio

Show code Edit in sandbox

HTML

        
            

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

Rounded button group MDB Pro component

Show code Edit in sandbox

HTML

        
            

        <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="fas fa-star fa-sm pr-2" aria-hidden="true"></i>
            Left</button>
          <button type="button" class="btn btn-purple btn-rounded"><i class="fas fa-heart fa-sm pr-2" aria-hidden="true"></i>Middle</button>
          <button type="button" class="btn btn-purple btn-rounded"><i class="fas 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="fas 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="far fa-sun 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="fas fa-user-secret fa-sm pr-2"
              aria-hidden="true"></i>Right</button>
        </div>

        
            

        .btn .fa.fa-sm {
        font-size: 1rem;
        margin-top: -5px;
        }

Additional button group

Show code Edit in sandbox

HTML

        
            

        <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="fab fa-instagram fa-sm pr-2" aria-hidden="true"></i>
            Left</button>
          <button type="button" class="btn btn-indigo"><i class="fab fa-twitter fa-sm pr-2" aria-hidden="true"></i>Middle</button>
          <button type="button" class="btn btn-indigo"><i class="fab 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="fas 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="fas 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="fas fa-train fa-sm pr-2"
              aria-hidden="true"></i>Right</button>
        </div>

        
            

        .btn .fa.fa-sm {
        font-size: 1rem;
        margin-top: -5px;
        }

Multicolored button group

Show code Edit in sandbox

HTML

        
            

        <div class="btn-group btn-group-lg mb-4" 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-4" 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-4" 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="fas fa-star" aria-hidden="true"></i></button>
            <button type="button" class="btn blue lighten-2"><i class="fas fa-heart" aria-hidden="true"></i></button>
            <button type="button" class="btn light-blue lighten-2"><i class="fas fa-user" aria-hidden="true"></i></button>
            <button type="button" class="btn cyan lighten-2"><i class="fab fa-twitter" aria-hidden="true"></i></button>
          </div>
        </div>