<div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Right</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Left</button> </div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group mr-2" role="group" aria-label="First group"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> </div> <div class="btn-group mr-2" role="group" aria-label="Second group"> <button type="button" class="btn btn-secondary">5</button> <button type="button" class="btn btn-secondary">6</button> <button type="button" class="btn btn-secondary">7</button> </div> <div class="btn-group" role="group" aria-label="Third group"> <button type="button" class="btn btn-secondary">8</button> </div> </div>
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group mr-2" role="group" aria-label="First group"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> </div> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text" id="btnGroupAddon">@</div> </div> <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"> </div> </div> <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group" role="group" aria-label="First group"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> </div> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text" id="btnGroupAddon2">@</div> </div> <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2"> </div> </div>
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div> <div class="btn-group" role="group" aria-label="...">...</div> <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <div class="btn-group" role="group"> <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div> </div> </div>
<div class="btn-group-vertical"> ... </div>