Button group

Bootstrap Button Group

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

See the following button groups examples:

Basic example

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

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 correct role and provide a label

In order for assistive technologies (such as screen readers) to convey that a series of buttons is 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 can also be used.

Button toolbar

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

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>

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.

HTML
CSS



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

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.

HTML



        <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

Pre-checked Check Check

Preselected Radio Radio

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>



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



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

Additional button group

HTML
CSS



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



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

Multicolored button group

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

Getting started : download & setup

Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue