Button Group
Button group
Default Button group style
<div class="btn-group">
<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>Button toolbar
Default Button toolbar style
<div class="btn-group me-2 mb-2">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2 mb-2">
<button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-primary">6</button>
<button type="button" class="btn btn-primary">7</button>
</div>
<div class="btn-group mb-2">
<button type="button" class="btn btn-primary">8</button>
</div>Button Sizing
Default button size style
<div class="btn-group mb-2 btn-group-lg">
<button class="btn btn-primary" type="button">Left</button>
<button class="btn btn-primary" type="button">Middle</button>
<button class="btn btn-primary" type="button">Right</button>
</div>
<div class="btn-group mb-2">
<button class="btn btn-primary" type="button">Left</button>
<button class="btn btn-primary" type="button">Middle</button>
<button class="btn btn-primary" type="button">Right</button>
</div>
<div class="btn-group mb-2 btn-group-sm">
<button class="btn btn-primary" type="button">Left</button>
<button class="btn btn-primary" type="button">Middle</button>
<button class="btn btn-primary" type="button">Right</button>
</div>
Button Nesting
Default button nesting style
<div class="btn-group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu"><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0);">Dropdown link</a>
</div>
</div>
</div>Vertical variation
Default button vertical variation style
<div class="btn-group-vertical">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>Vertical dropdown variation
Default button vertical variation style
<div aria-label="Vertical button group" role="group" class="btn-group-vertical">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
<div role="group" class="btn-group">
<button data-bs-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">Dropdown</button>
<div class="dropdown-menu"><a href="javascript:void(0);" class="dropdown-item">Dropdown link</a>
<a href="javascript:void(0);" class="dropdown-item">Dropdown link</a>
</div>
</div>
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
<div role="group" class="btn-group">
<button data-bs-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">Dropdown</button>
<div class="dropdown-menu"><a href="javascript:void(0);" class="dropdown-item">Dropdown link</a>
<a href="javascript:void(0);" class="dropdown-item">Dropdown link</a>
</div>
</div>
<div role="group" class="btn-group">
<button data-bs-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">Dropdown</button>
<div class="dropdown-menu"><a href="javascript:void(0);" class="dropdown-item">Dropdown link</a>
<a href="javascript:void(0);" class="dropdown-item">Dropdown link</a>
</div>
</div>
<div role="group" class="btn-group">
<button data-bs-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">Dropdown</button>
<div class="dropdown-menu"><a href="javascript:void(0);" class="dropdown-item">Dropdown link</a>
<a href="javascript:void(0);" class="dropdown-item">Dropdown link</a>
</div>
</div>
</div>