Horizontal
<div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-dark">Left</button> <button type="button" class="btn btn-dark">Middle</button> <button type="button" class="btn btn-dark">Right</button> </div>
Input Group
@
<div class="btn-toolbar justify-content-between mr-2" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group mb-2" role="group" aria-label="First group"> <button type="button" class="btn btn-dark">1</button> <button type="button" class="btn btn-dark">2</button> <button type="button" class="btn btn-dark">3</button> <button type="button" class="btn btn-dark">4</button> </div> <div class="input-group mb-2"> <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>
Vertical
<div class="btn-group-vertical" role="group" aria-label="Vertical button group"> <button type="button" class="btn btn-dark">Button</button> <div class="btn-group" role="group"> <button id="btnGroupVerticalDrop1" type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <svg> ... </svg> </button> <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div> </div> <button type="button" class="btn btn-dark">Button</button> <button type="button" class="btn btn-dark">Button</button> <div class="btn-group" role="group"> <button id="btnGroupVerticalDrop2" type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <svg> ... </svg> </button> <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div> </div> </div>