Bootstrap: Button Groups

Basic Example

Group a series of Buttons together on a single line with the ButtonGroup component.

<ButtonGroup>
  <Button bsStyle='blue'>Left</Button>
  <Button bsStyle='blue'>Middle</Button>
  <Button bsStyle='blue'>Right</Button>
</ButtonGroup>

Button Toolbar

Combine sets of ButtonGroup into a ButtonToolbar for more complex components.

<ButtonToolbar>
  <ButtonGroup>
    <Button bsStyle='blue'>1</Button>
    <Button bsStyle='blue'>2</Button>
    <Button bsStyle='blue'>3</Button>
    <Button bsStyle='blue'>4</Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button bsStyle='green'>5</Button>
    <Button bsStyle='green'>6</Button>
    <Button bsStyle='green'>7</Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button bsStyle='red'>8</Button>
  </ButtonGroup>
</ButtonToolbar>

Sizing

Instead of applying button sizing classes to every button in a group, just add lg/sm/xs to the ButtonGroup component itself.




<div>
  <ButtonGroup lg>
    <Button bsStyle='blue'>1</Button>
    <Button bsStyle='blue'>2</Button>
    <Button bsStyle='blue'>3</Button>
    <Button bsStyle='blue'>4</Button>
  </ButtonGroup>
</div><br/>
<div>
  <ButtonGroup>
    <Button bsStyle='green'>1</Button>
    <Button bsStyle='green'>2</Button>
    <Button bsStyle='green'>3</Button>
    <Button bsStyle='green'>4</Button>
  </ButtonGroup>
</div><br/>
<div>
  <ButtonGroup sm>
    <Button bsStyle='red'>1</Button>
    <Button bsStyle='red'>2</Button>
    <Button bsStyle='red'>3</Button>
  </ButtonGroup>
</div><br/>
<div>
  <ButtonGroup xs>
    <Button bsStyle='yellow'>1</Button>
    <Button bsStyle='yellow'>2</Button>
  </ButtonGroup>
</div>

Nesting

Place a ButtonGroup within another ButtonGroup when you want Dropdown Menus mixed with a series of Button components.

<ButtonGroup>
  <Button bsStyle='darkcyan'>1</Button>
  <Button bsStyle='darkcyan'>2</Button>
  <ButtonGroup>
    <DropdownButton container={this} menu='menu5'>
      <span>Dropdown </span><Caret/>
    </DropdownButton>
    <Menu ref='menu5'>
      <MenuItem href='#'>Regular link</MenuItem>
      <MenuItem href='#' disabled>Disabled link</MenuItem>
      <MenuItem href='#'>Another link</MenuItem>
    </Menu>
  </ButtonGroup>
</ButtonGroup>

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally.

<ButtonGroup vertical>
  <Button bsStyle='pink'>Button</Button>
  <Button bsStyle='pink'>Button</Button>
  <ButtonGroup>
    <DropdownButton bsStyle='pink' container={this} menu='menu6'>
      <span>Dropdown </span><Caret/>
    </DropdownButton>
    <Menu bsStyle='pink' ref='menu6'>
      <MenuItem href='#'>Regular link</MenuItem>
      <MenuItem href='#' disabled>Disabled link</MenuItem>
      <MenuItem href='#'>Another link</MenuItem>
    </Menu>
  </ButtonGroup>
  <Button bsStyle='pink'>Button</Button>
  <Button bsStyle='pink'>Button</Button>
  <ButtonGroup>
    <DropdownButton bsStyle='pink' container={this} menu='menu7'>
      <span>Dropdown </span><Caret/>
    </DropdownButton>
    <Menu bsStyle='pink' ref='menu7'>
      <MenuItem href='#'>Regular link</MenuItem>
      <MenuItem href='#' disabled>Disabled link</MenuItem>
      <MenuItem href='#'>Another link</MenuItem>
    </Menu>
  </ButtonGroup>
  <ButtonGroup>
    <DropdownButton bsStyle='pink' container={this} menu='menu8'>
      <span>Dropdown </span><Caret/>
    </DropdownButton>
    <Menu bsStyle='pink' ref='menu8'>
      <MenuItem href='#'>Regular link</MenuItem>
      <MenuItem href='#' disabled>Disabled link</MenuItem>
      <MenuItem href='#'>Another link</MenuItem>
    </Menu>
  </ButtonGroup>
  <ButtonGroup>
    <DropdownButton bsStyle='pink' container={this} menu='menu9'>
      <span>Dropdown </span><Caret/>
    </DropdownButton>
    <Menu bsStyle='pink' ref='menu9'>
      <MenuItem href='#'>Regular link</MenuItem>
      <MenuItem href='#' disabled>Disabled link</MenuItem>
      <MenuItem href='#'>Another link</MenuItem>
    </Menu>
  </ButtonGroup>
</ButtonGroup>

Justified button groups

Make a set of buttons appear vertically stacked rather than horizontally.

<ButtonGroup justified>
  <Button bsStyle='purple' componentClass='a'>Left</Button>
  <Button bsStyle='purple' componentClass='a'>Middle</Button>
  <ButtonGroup>
    <DropdownButton bsStyle='purple' container={this} menu='menu10'>
      <span>Dropdown </span><Caret/>
    </DropdownButton>
    <Menu ref='menu10' alignRight bsStyle='purple'>
      <MenuItem href='#'>Regular link</MenuItem>
      <MenuItem href='#' disabled>Disabled link</MenuItem>
      <MenuItem href='#'>Another link</MenuItem>
    </Menu>
  </ButtonGroup>
</ButtonGroup>