Bootstrap группы кнопок

Группы кнопок на одной линии оформляются классом .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>