
Группы кнопок на одной линии оформляются классом .btn-group у контейнера содержащего кнопки, также добавляется атрибут role=»group». Кроме .btn-group можно применять .btn-toolbar и role=»toolbar» для более комплексных компонентов. Размер группы кнопок определяется классами .btn-group-lg, .btn-group-sm и .btn-group-xs
Bootstrap группы кнопок
Для комбинации группы кнопок и выпадающего меню используется .btn-group с другим .btn-group:
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Для вертикального расположения группы кнопок, нужно задействовать класс .btn-group-vertical:
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Для выравнивания группы кнопок по ширине, используется класс .btn-group.btn-group-justified

<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>