Bootstrap では、一連のボタンの集合を一緒にして、1 行内にボタンをグループ化することができます：

ボタングループを作るには、クラス .btn-group を持つ <div> 要素を使用します：

例

<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

Try it Yourself »

チップ: グループ内の全ボタンサイズを設定するには、全てのボタンにサイズを適用する代わりに、.btn-group-* を使用します：

例

<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

Try it Yourself »

縦向きのボタングループ

縦向きのボタングループの作成には、クラス .btn-group-vertical を使用します：

例

<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

Try it Yourself »

両端揃えのボタングループ

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

例

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

Try it Yourself »

注:<button> 要素に対しては、各ボタンを .btn-group クラス内にラップしなければなりません：

例

<div class="btn-group btn-group-justified">
<div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
</div>
</div>

Try it Yourself »

ボタングループのネストとドロップダウンメニュー

ドロップダウンメニューを作るため、ボタングループをネストします：

例

<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</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="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
</div>
</div>

Try it Yourself »

ボタン・ドロップダウンの区切り

例

<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="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
</ul>
</div>

Try it Yourself »

Bootstrap ボタングループ

ボタングループ

例

例

縦向きのボタングループ

例

両端揃えのボタングループ

例

例

ボタングループのネストとドロップダウンメニュー

例

ボタン・ドロップダウンの区切り

例

練習問題で確認！