Button Group
Button Group.
Make use of Bootstrap's unique Button Group styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
Btn Group on BootstrapButton 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>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>