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()">Dropdown link</a><a class="dropdown-item" href="javascript:void()">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()" class="dropdown-item">Dropdown link</a><a href="javascript:void()" 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()" class="dropdown-item">Dropdown link</a><a href="javascript:void()" 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()" class="dropdown-item">Dropdown link</a><a href="javascript:void()" 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()" class="dropdown-item">Dropdown link</a><a href="javascript:void()" class="dropdown-item">Dropdown link</a></div></div></div>