ボタングループ

Bootstrapを使用すると、一連のボタンをグループ化することができます。
ボタングループを作成するには、クラス .btn-group を <div> 要素に追加します。

<div class="btn-group">
  <button type="button" class="btn btn-primary">Microsoft</button>
  <button type="button" class="btn btn-primary">Nintendo</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

ヒント： グループ内のすべてのボタンにボタンサイズを適用する代わりに、クラスの .btn-group-lg|sm|xs を使用して、グループ内のすべてのボタンのサイズを調整します。

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Microsoft</button>
  <button type="button" class="btn btn-primary">Nintendo</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

縦並びのボタングループ

.btn-group-vertical クラスを使用してボタンを縦に並ばせます。

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Microsoft</button>
  <button type="button" class="btn btn-primary">Nintendo</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

全幅のボタングループ

画面の幅全体にまたがるには、 .btn-group-justified クラスを使用します。

Microsoft Nintendo Sony

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Microsoft</a>
  <a href="#" class="btn btn-primary">Nintendo</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>

注： <button> タグを使う場合は、各ボタンを .btn-group クラスでラップする必要があります

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Microsoft</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Nintendo</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

ボタングループにドロップダウンメニューを追加

ボタングループにドロップダウンメニューを追加できます。

<div class="btn-group">
  <button type="button" class="btn btn-primary">Microsoft</button>
  <button type="button" class="btn btn-primary">Nintendo</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">PS4</a></li>
      <li><a href="#">PS3</a></li>
    </ul>
  </div>
</div>

ボタンとドロップダウンの境界

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">PS4</a></li>
    <li><a href="#">PS3</a></li>
  </ul>
</div>