include groups code example

Example: include groups

.btn-group
<div class=”btn-group” role=”group” aria-label=”Basic example”>
 <button type=”button” class=”btn btn-secondary”>Left</button>
 <button type=”button” class=”btn btn-secondary”>Middle</button>
 <button type=”button” class=”btn btn-secondary”>Right</button>
</div>
.btn-group-vertical
Style a vertical group of buttons:
<div class=”btn-group-vertical” role=”group” aria-label=”Basic example”>
 <button type=”button” class=”btn btn-secondary”>Left</button>
 <button type=”button” class=”btn btn-secondary”>Middle</button>
 <button type=”button” class=”btn btn-secondary”>Right</button>
</div>
.btn-group (Nested)
You can also create nested buttons with drop down menus.
<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” aria-labelledby=”btnGroupDrop1”>
 <a class=”dropdown-item” href=”#!”>Dropdown link</a>
 <a class=”dropdown-item” href=”#!”>Dropdown link</a>
 </div>
 </div>
</div>
.btn-toolbar
Arrange button groups into a toolbar to make more complex components. You can apply different utility classes for
additional styling.
<div class=”btn-toolbar” 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>
 </div>
 <div class=”btn-group” role=”group” aria-label=”Second group”>
 <button type=”button” class=”btn btn-secondary”>5</button>
 <button type=”button” class=”btn btn-secondary”>6</button>
 </div>
 <div class=”btn-group” role=”group” aria-label=”Third group”>
 <button type=”button” class=”btn btn-secondary”>8</button>
 </div>
</div>
.btn-group-toggle
Install Bootstrap Toggle plugin to modify checkboxes into toggles. You can then add data-toggle=”buttons” to a button
group with modified buttons to enable their toggling behavior via JavaScrip. Afterwards, use .btn-group-toggle to style
different inputs within your buttons.
<div class=”btn-group-toggle” data-toggle=”buttons”>
 <label class=”btn btn-secondary active”>
 <input type=”checkbox” checked autocomplete=”off”> Checked
 </label>
</div>