Button group
Default Button group style
<ButtonGroup>
<Button variant="primary">Left</Button>
<Button variant="primary">Middle</Button>
<Button variant="primary">Right</Button>
</ButtonGroup>
Button toolbar
Default Button toolbar style
<ButtonGroup className="me-2 mb-2">
<Button variant="primary">1</Button>
<Button variant="primary">2</Button>
<Button variant="primary">3</Button>
<Button variant="primary">4</Button>
</ButtonGroup>
<div className="btn-group me-2 mb-2">
<Button variant="primary">5</Button>
<Button variant="primary">6</Button>
<Button variant="primary">7</Button>
</div>
<div className="btn-group mb-2">
<Button variant="primary">8</Button>
</div>
Button Sizing
Default button size style
<ButtonGroup size="lg" className="mb-2 me-2">
<Button variant="primary">Left</Button>
<Button variant="primary">Middle</Button>
<Button variant="primary">Right</Button>
</ButtonGroup>
<ButtonGroup className="mb-2 me-2">
<Button variant="primary">Left</Button>
<Button variant="primary">Middle</Button>
<Button variant="primary">Right</Button>
</ButtonGroup>
<ButtonGroup size="sm" className="mb-2 ">
<Button variant="primary">Left</Button>
<Button variant="primary">Middle</Button>
<Button variant="primary">Right</Button>
</ButtonGroup>
Button Nesting
Default button nesting style
<ButtonGroup>
<Button variant="primary">1</Button>
<Button variant="primary">2</Button>
<DropdownButton
as={ButtonGroup}
title="Dropdown"
id="bg-nested-dropdown"
>
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
Vertical variation
Default button vertical variation style
<ButtonGroup vertical>
<Button variant="primary">Button</Button>
<Button variant="primary">Button</Button>
<Button variant="primary">Button</Button>
<Button variant="primary">Button</Button>
<Button variant="primary">Button</Button>
<Button variant="primary">Button</Button>
</ButtonGroup>
Vertical dropdown variation
Default button vertical variation style
<ButtonGroup vertical>
<Button variant="primary">Button</Button>
<Button variant="primary">Button</Button>
<DropdownButton
as={ButtonGroup}
title="Dropdown"
id="bg-vertical-dropdown-3"
>
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
<Button variant="primary">Button</Button>
<Button variant="primary">Button</Button>
<DropdownButton
as={ButtonGroup}
title="Dropdown"
id="bg-vertical-dropdown-3"
>
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
<DropdownButton
as={ButtonGroup}
title="Dropdown"
id="bg-vertical-dropdown-3"
>
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
<DropdownButton
as={ButtonGroup}
title="Dropdown"
id="bg-vertical-dropdown-3"
>
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
</ButtonGroup>