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

                            
                            <div data-example-id="simple-button-group" class="bs-example">
                              <div aria-label="Basic example" role="group" class="btn-group">
                                <button class="btn btn-default" type="button">Left</button>
                                <button class="btn btn-default" type="button">Middle</button>
                                <button class="btn btn-default" type="button">Right</button>
                              </div>
                            </div>
                            
                            

Button toolbar

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

                            
                            <div data-example-id="simple-button-toolbar" class="bs-example">
                              <div aria-label="Toolbar with button groups" role="toolbar" class="btn-toolbar">
                                <div aria-label="First group" role="group" class="btn-group">
                                  <button class="btn btn-default" type="button">1</button>
                                  <button class="btn btn-default" type="button">2</button>
                                  <button class="btn btn-default" type="button">3</button>
                                  <button class="btn btn-default" type="button">4</button>
                                </div>
                                <div aria-label="Second group" role="group" class="btn-group">
                                  <button class="btn btn-default" type="button">5</button>
                                  <button class="btn btn-default" type="button">6</button>
                                  <button class="btn btn-default" type="button">7</button>
                                </div>
                                <div aria-label="Third group" role="group" class="btn-group">
                                  <button class="btn btn-default" type="button">8</button>
                                </div>
                              </div>
                            </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.

                            
                            <div data-example-id="button-group-sizing" class="bs-example">
                              <div aria-label="Large button group" role="group" class="btn-group btn-group-lg">
                                <button class="btn btn-default" type="button">Left</button>
                                <button class="btn btn-default" type="button">Middle</button>
                                <button class="btn btn-default" type="button">Right</button>
                              </div>
                              <br>
                              <div aria-label="Default button group" role="group" class="btn-group">
                                <button class="btn btn-default" type="button">Left</button>
                                <button class="btn btn-default" type="button">Middle</button>
                                <button class="btn btn-default" type="button">Right</button>
                              </div>
                              <br>
                              <div aria-label="Small button group" role="group" class="btn-group btn-group-sm">
                                <button class="btn btn-default" type="button">Left</button>
                                <button class="btn btn-default" type="button">Middle</button>
                                <button class="btn btn-default" type="button">Right</button>
                              </div>
                              <br>
                              <div aria-label="Extra-small button group" role="group" class="btn-group btn-group-xs">
                                <button class="btn btn-default" type="button">Left</button>
                                <button class="btn btn-default" type="button">Middle</button>
                                <button class="btn btn-default" type="button">Right</button>
                              </div>
                            </div>
                            
                            

Nesting

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

                            
                            <div data-example-id="button-group-nesting" class="bs-example">
                              <div aria-label="Button group with nested dropdown" role="group" class="btn-group">
                                <button class="btn btn-default" type="button">1</button>
                                <button class="btn btn-default" type="button">2</button>
                                <div role="group" class="btn-group">
                                  <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" id="btnGroupDrop1"> 
                                  Dropdown 
                                  <span class="caret"></span> </button>
                                  <ul aria-labelledby="btnGroupDrop1" class="dropdown-menu">
                                    <li><a href="#">Dropdown link</a></li>
                                    <li><a href="#">Dropdown link</a></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            
                            

Vertical variation

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

                            
                            <div data-example-id="vertical-button-group" class="bs-example">
                              <div aria-label="Vertical button group" role="group" class="btn-group-vertical">
                                <button class="btn btn-default" type="button">Button</button>
                                <button class="btn btn-default" type="button">Button</button>
                                <div role="group" class="btn-group">
                                  <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" id="btnGroupVerticalDrop1">
                                   Dropdown 
                                  <span class="caret"></span> </button>
                                  <ul aria-labelledby="btnGroupVerticalDrop1" class="dropdown-menu">
                                    <li><a href="#">Dropdown link</a></li>
                                    <li><a href="#">Dropdown link</a></li>
                                  </ul>
                                </div>
                                <button class="btn btn-default" type="button">Button</button>
                                <button class="btn btn-default" type="button">Button</button>
                                <div role="group" class="btn-group">
                                  <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" id="btnGroupVerticalDrop2">
                                   Dropdown 
                                  <span class="caret"></span> </button>
                                  <ul aria-labelledby="btnGroupVerticalDrop2" class="dropdown-menu">
                                    <li><a href="#">Dropdown link</a></li>
                                    <li><a href="#">Dropdown link</a></li>
                                  </ul>
                                </div>
                                <div role="group" class="btn-group">
                                  <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" id="btnGroupVerticalDrop3">
                                   Dropdown 
                                   <span class="caret"></span> </button>
                                  <ul aria-labelledby="btnGroupVerticalDrop3" class="dropdown-menu">
                                    <li><a href="#">Dropdown link</a></li>
                                    <li><a href="#">Dropdown link</a></li>
                                  </ul>
                                </div>
                                <div role="group" class="btn-group">
                                  <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" id="btnGroupVerticalDrop4">
                                   Dropdown 
                                  <span class="caret"></span> </button>
                                  <ul aria-labelledby="btnGroupVerticalDrop4" class="dropdown-menu">
                                    <li><a href="#">Dropdown link</a></li>
                                    <li><a href="#">Dropdown link</a></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            
                            

Justified button groups With <a> elements

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

                            
                            <div data-example-id="simple-justified-button-group" class="bs-example">
                              <div aria-label="Justified button group" role="group" class="btn-group btn-group-justified">
                                <a role="button" class="btn btn-default" href="#">Left</a> 
                                <a role="button" class="btn btn-default" href="#">Middle</a>
                                <a role="button" class="btn btn-default" href="#">Right</a> </div>
                                <br>
                              <div aria-label="Justified button group with nested dropdown" role="group" class="btn-group btn-group-justified">
                                <a role="button" class="btn btn-default" href="#">Left</a> <a role="button" class="btn btn-default" href="#">Middle</a>
                                <div role="group" class="btn-group">
                                    <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" href="#">
                                     Dropdown 
                                     <span class="caret"></span> </a>
                                  <ul class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider" role="separator"></li>
                                    <li><a href="#">Separated link</a></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            
                            

Justified button groups With <button> elements

To use justified button groups with <button> elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to <button> elements, but since we support button dropdowns, we can work around that.

                        
                        <div data-example-id="button-tag-button-group-justified" class="bs-example">
                          <div aria-label="Justified button group" role="group" class="btn-group btn-group-justified">
                            <div role="group" class="btn-group">
                              <button class="btn btn-default" type="button">Left</button>
                            </div>
                            <div role="group" class="btn-group">
                              <button class="btn btn-default" type="button">Middle</button>
                            </div>
                            <div role="group" class="btn-group">
                              <button class="btn btn-default" type="button">Right</button>
                            </div>
                          </div>
                        </div>
                        
                        

Single button dropdowns

Turn a button into a dropdown toggle with some basic markup changes.

                            
                            <div data-example-id="single-button-dropdown" class="bs-example">
                              <div class="btn-group">
                                <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                                Default 
                                <span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider" role="separator"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div>
                              <div class="btn-group">
                                <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-dark btn-flat dropdown-toggle" type="button">
                                Primary
                                <span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider" role="separator"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div>
                              <div class="btn-group">
                                <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-success dropdown-toggle" type="button">
                                Success 
                                <span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider" role="separator"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div>
                              <div class="btn-group">
                                <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button">
                                Info 
                                <span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider" role="separator"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div>
                              <div class="btn-group">
                                <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" type="button">
                                Warning 
                                <span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider" role="separator"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div>
                              <div class="btn-group">
                                <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-danger dropdown-toggle" type="button">
                                Danger 
                                <span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider" role="separator"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div>
                            </div>
                            
                            

Split button dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

                            
                            <div data-example-id="split-button-dropdown" class="bs-example">
                              <div class="btn-group">
                                <button class="btn btn-default" type="button">Default</button>
                                <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                                 <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider" role="separator"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div>
                              <div class="btn-group">
                                <button class="btn btn-primary" type="button">Primary</button>
                                <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-dark btn-flat dropdown-toggle" type="button">
                                 <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider" role="separator"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div>
                              <div class="btn-group">
                                <button class="btn btn-success" type="button">Success</button>
                                <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-success dropdown-toggle" type="button">
                                 <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider" role="separator"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div>
                              <div class="btn-group">
                                <button class="btn btn-info" type="button">Info</button>
                                <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button">
                                 <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider" role="separator"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div>
                              <div class="btn-group">
                                <button class="btn btn-warning" type="button">Warning</button>
                                <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" type="button">
                                 <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider" role="separator"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div>
                              <div class="btn-group">
                                <button class="btn btn-danger" type="button">Danger</button>
                                <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-danger dropdown-toggle" type="button">
                                 <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider" role="separator"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div>
                            </div>
                            
                            

Sizing

Button dropdowns work with buttons of all sizes.

                                
                                <div data-example-id="button-dropdown-sizing" class="bs-example">
                                  <div role="toolbar" class="btn-toolbar">
                                    <div class="btn-group">
                                      <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button" class="btn btn-default btn-lg dropdown-toggle">
                                       Large button 
                                       <span class="caret"></span> </button>
                                      <ul class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider" role="separator"></li>
                                        <li><a href="#">Separated link</a></li>
                                      </ul>
                                    </div>
                                  </div>
                                  <div role="toolbar" class="btn-toolbar">
                                    <div class="btn-group">
                                      <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button" class="btn btn-default btn-sm dropdown-toggle">
                                       Small button 
                                       <span class="caret"></span> </button>
                                      <ul class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider" role="separator"></li>
                                        <li><a href="#">Separated link</a></li>
                                      </ul>
                                    </div>
                                  </div>
                                  <div role="toolbar" class="btn-toolbar">
                                    <div class="btn-group">
                                      <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button" class="btn btn-default btn-xs dropdown-toggle">
                                       Extra small button 
                                       <span class="caret"></span> </button>
                                      <ul class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider" role="separator"></li>
                                        <li><a href="#">Separated link</a></li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                
                                

Dropup variation

Trigger dropdown menus above elements by adding .dropup to the parent.

                                
                                <div data-example-id="button-dropdown-dropup" class="bs-example">
                                  <div role="toolbar" class="btn-toolbar">
                                    <div class="btn-group dropup">
                                      <button class="btn btn-default" type="button">Dropup</button>
                                      <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                                       <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
                                      <ul class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider" role="separator"></li>
                                        <li><a href="#">Separated link</a></li>
                                      </ul>
                                    </div>
                                    <div class="btn-group dropup">
                                      <button class="btn btn-primary" type="button">Right dropup</button>
                                      <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-dark btn-flat dropdown-toggle" type="button">
                                       <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
                                      <ul class="dropdown-menu dropdown-menu-right">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider" role="separator"></li>
                                        <li><a href="#">Separated link</a></li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>