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>
Vertical dropdown variation
Default button vertical variation style
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
Button group
Default Button group style
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
Checkbox Button Groups
Default Checkbox Button Groups style
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
Radio Button Groups
Default Radio Button Groups style
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</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>