Bootstrap 4 Components

Button Groups

You can group a series of buttons together horizontally or vertically.

Horizontal Button Group

To add a horizontal button group wrap a series of a button within a <div> with .btn-group.

<div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> </div>

Vertical Button Group

Instead of .btn-group use .btn-group-vertical to stack buttons vertically.

<div class="btn-group-vertical" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> </div>

Button Toolbar

You can combine two or more button groups to create a button toolbar. For this, nest the button groups inside a <div> with the class .btn-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-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> </div> <div class="btn-group mr-2" role="group" aria-label="Second group"> <button type="button" class="btn btn-secondary">5</button> <button type="button" class="btn btn-secondary">6</button> <button type="button" class="btn btn-secondary">7</button> </div> <div class="btn-group" role="group" aria-label="Third group"> <button type="button" class="btn btn-secondary">8</button> <button type="button" class="btn btn-secondary">9</button> </div> </div>

Button Sizing

You don’t have to size each and every button in the button group you can simply specify the size of the buttons by adding .btn-group-lg for large size and .btn-group-sm for smaller sized buttons.

<div class="btn-group btn-group-lg" role="group" aria-label="First Group"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> </div> <div class="btn-group" role="group" aria-label="Second Group"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> </div> <div class="btn-group btn-group-sm" role="group" aria-label="Third Group"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> </div>

Dropdowns in Button Groups

You can add dropdowns in a button group by placing the drop down in a separate button group and nesting the button group inside another button group.

<div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <div class="btn-group" role="group"> <button id="btnGroupDrop1" type="button" class="btn btn-secondary 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 1</a> <a class="dropdown-item" href="#">Dropdown link 2</a> <a class="dropdown-item" href="#">Dropdown link 3</a> </div> </div> </div>

Following code shows how we can have a split dropdown button group using button group.

<div class="btn-group"> <button type="button" class="btn btn-secondary">Dropdown</button> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown Link 1</a> <a class="dropdown-item" href="#">Dropdown link 2</a> <a class="dropdown-item" href="#">Dropdown Link 3</a> </div> </div>

Note: Split dropdown in button groups are not supported in the vertical stacking of the button groups.

Like dropdowns, mix different input groups within button groups into your toolbars.

<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-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> </div> <div class="input-group"> <span class="input-group-addon" id="btnGroupAddon">@</span> <input type="text" class="form-control" placeholder="Input group example" aria-describedby="btnGroupAddon"> </div> </div>