將一系列的.btn包裹在.btn-group內，并使用我們提供的插件，可以實現選擇按鈕、選取塊狀區的行為功能。
<div class="row mt-5 d-block"><div class="btn-group"><button class="btn btn-primary">Left</button><button class="btn btn-primary">Center</button><button class="btn btn-primary">Right</button></div>
</div>
按鈕工具欄
根據需要使用樣式定義，對按鈕進行群組、間隔等定義，將按鈕組的組合組合成為更復雜組件的按鈕工具欄。
<div class="row mt-5 btn-toolbar"><div class="btn-group mr-2"><button class="btn btn-success">1</button><button class="btn btn-success">2</button><button class="btn btn-success">3</button></div><div class="btn-group mr-2"><button class="btn btn-success">5</button><button class="btn btn-success">6</button><button class="btn btn-success">7</button></div><div class="btn-group"><button class="btn btn-success">9</button></div>
</div>
輸入組與按鈕組混合使用
<div class="row btn-toolbar mt-5"><div class="btn-group mr-2"><button class="btn btn-secondary">1</button><button class="btn btn-secondary">2</button><button class="btn btn-secondary">3</button><button class="btn btn-secondary">4</button></div><div class="input-group"><div class="input-group-prepend"><div class="input-group-text">@</div></div><input type="text" class="form-control" placeholder="Input group example"></div>
</div>
大小規格和尺寸縮放
定義大小縮放，不需要將按鈕中每個子元素都逐一定義，只需在.btn-group-*中增加.btn-group-*，就能作用于組下的每個子按鈕，實現樣式縮放。
<div class="row mt-5"><div class="btn-group btn-group-lg"><button class="btn btn-primary">Left</button><button class="btn btn-primary">Center</button><button class="btn btn-primary">Right</button></div>
</div>
<div class="row mt-1"><div class="btn-group"><button class="btn btn-primary">Left</button><button class="btn btn-primary">Center</button><button class="btn btn-primary">Right</button></div>
</div>
<div class="row mt-1 "><div class="btn-group btn-group-sm"><button class="btn btn-primary">Left</button><button class="btn btn-primary">Center</button><button class="btn btn-primary">Right</button></div>
</div>
嵌套
將.btn-group放在另一個.btn-group里，可以實現按鈕組與下拉菜單的組合。
<!-- 下拉菜單 -->
<div class="row mt-5"><div class="btn-group"><button class="btn btn-danger">1</button><button class="btn btn-danger">2</button><div class="btn-group"><button class="btn btn-secondary dropdown-toggle" data-toggle='dropdown'>城市</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a></div></div></div>
</div>
垂直排列
將一組按鈕垂直排列，而不是水平排列，不支持分割式下拉菜單的定義。
<div class="container"><!-- 垂直排列 --><div class="row mt-5"><div class="btn-group-vertical"><button class="btn btn-warning">北京</button><button class="btn btn-warning">上海</button><button class="btn btn-warning">廣州</button></div></div>
</div>
<div class="row mt-5"><div class="btn-group-vertical"><button class="btn btn-danger">1</button><button class="btn btn-danger">2</button><div class="btn-group"><button class="btn btn-secondary dropdown-toggle" data-toggle='dropdown'>城市</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a></div></div></div>
</div>
