メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

ボタングループ（Button group）

一連のボタンを1つにまとめたり、縦一列に積み上げる。

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目

基本のボタングループ（Basic example）

1. 通常の設定

.btn-group で .btn を含む一連のボタンを囲む。

見本
設定例
<div class="btn-group" role="group" aria-label="基本のボタングループ">
  <button type="button" class="btn btn-primary">行頭</button>
  <button type="button" class="btn btn-primary">中</button>
  <button type="button" class="btn btn-primary">行末</button>
</div>
.btn-group[role=group aria-label]>btn.btn.btn-primary[type=button]*3（ボタンが3つの場合）
※.btn-primary の部分はお好みのボタンカラーを選んで下さい
【設定】
  • div.btn-group > [button.btn + button.btn ・・・]《ボタン》
    ※複数のボタンを .btn-group でまとめる
【アクセシビリティの設定】
  • div.btn-group には、
    • role="group" 属性（支援技術にボタン・グループの役割を伝える）
    • aria-label 属性（ビジュアルで目的を表現する要素に対するラベル付け）
    を入れる

2. アクティブ化の設定 v5.0.0-alpha1「ボタン」から移動

これらのクラスは、.navナビゲーションコンポーネントの代わりとして、リンクタイプのボタングループに追加できる。

見本
行頭（アクティブ） 中 行末
設定例
<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">行頭（アクティブ）</a>
  <a href="#" class="btn btn-primary">中</a>
  <a href="#" class="btn btn-primary">行末</a>
</div>
.btn-group>a.btn.btn-primary.active[aria-current=page]+a.btn.btn-primary*2（ボタンが3つの場合）
※.btn-primary の部分はお好みのボタンカラーを選んで下さい
【設定】
  • a.btn.btn-{themecolor} に .active を追加
【アクセシビリティの設定】
  • .active と同じ要素に aria-current="page"（支援技術に現在のページだと伝える）を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • アクセシビリティの設定を追加

ミックススタイル（Mixed styles）v5.0.0-alpha2追加

見本
設定例
<div class="btn-group" role="group" aria-label="基本的な混合スタイルの例">
  <button type="button" class="btn btn-danger">行頭</button>
  <button type="button" class="btn btn-warning">中</button>
  <button type="button" class="btn btn-success">行末</button>
</div>
【設定】
  • ボタンの色は途中で変更可能

アウトラインスタイル（Outlined styles）v5.0.0-alpha1追加

見本
設定例
<div class="btn-group" role="group" aria-label="基本的なアウトラインの例">
  <button type="button" class="btn btn-outline-secondary">行頭</button>
  <button type="button" class="btn btn-outline-secondary">中</button>
  <button type="button" class="btn btn-outline-secondary">行末</button>
</div>
【設定】
  • ボタンをアウトラインボタン（.btn.btn-outline-{themecolor}）にすることも可能

チェックボックスとラジオボタンのボタングループ（Checkbox and radio button groups）v5.0.0-alpha2設定変更（「ボタンプラグイン」から移動）

ボタンのようなチェックボックスとラジオ切替ボタンを継ぎ目なしに見えるボタングループに組み入れ。

1. チェックボックスの場合
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="btn-group" role="group" aria-label="基本的なチェックボックス切替ボタングループ">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label for="btncheck1" class="btn btn-outline-primary">チェックボックス 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label for="btncheck2" class="btn btn-outline-primary">チェックボックス 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label for="btncheck3" class="btn btn-outline-primary">チェックボックス 3</label>
</div>
.btn-group[role=group aria-label]>(input:c.btn-check[autocomplete=off]+label.btn.btn-primary)*3（ボタンが3つの場合）
※.btn-primary の部分はお好みのボタンカラーを選んで下さい
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-primary">
    <input type="checkbox" id="btncheck1"> チェックボックス 1
  </label>
  <label class="btn btn-outline-primary">
    <input type="checkbox" id="btncheck2"> チェックボックス 2
  </label>
  <label class="btn btn-outline-primary">
    <input type="checkbox" id="btncheck3"> チェックボックス 3
  </label>
</div>
2. ラジオボタンの場合

※name 属性の設定を入れ忘れてたのでv5.3.0で追加

Bootstrap5.xの設定例 緑背景が変更箇所
<div class="btn-group" role="group" aria-label="基本的なラジオボタン切替ボタングループ">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off">
  <label for="btnradio1" class="btn btn-outline-primary">ラジオボタン 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label for="btnradio2" class="btn btn-outline-primary">ラジオボタン 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label for="btnradio3" class="btn btn-outline-primary">ラジオボタン 3</label>
</div>
.btn-group[role=group aria-label]>(input:r.btn-check[autocomplete=off]+label.btn.btn-primary)*3（ボタンが3つの場合）
※.btn-primary の部分はお好みのボタンカラーを選んで下さい
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-primary">
    <input type="radio" name="btnradio" id="btnradio1"> ラジオボタン 1
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="btnradio" id="btnradio2"> ラジオボタン 2
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="btnradio" id="btnradio3"> ラジオボタン 3
  </label>
</div>
【設定】
【変更履歴】

ボタンツールバー（Button toolbar）v5.0.0-beta1設定変更

ボタングループのセットをボタンツールバーに組み合わせて、より複雑なコンポーネントを作成。必要に応じてユーティリティクラスを使用して、グループ、ボタンなどを配置。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="btn-toolbar" role="toolbar" aria-label="ボタングループのツールバー">
  <div class="btn-group me-2" role="group" aria-label="第一グループ">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="第二グループ">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="第三グループ">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>
.btn-toolbar[role=toolbar aria-label]>(.btn-group.me-2[role=group aria-label]>(btn.btn.btn-secondary[type=button])*4)+(.btn-group.me-2[role=group aria-label]>(btn.btn.btn-secondary[type=button])*3)+(.btn-group[role=group aria-label]>(btn.btn.btn-secondary[type=button])*2)（ボタンが4,3,2の3つのグループの場合）
※.btn-secondary の部分はお好みのカラーを選んで下さい
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="btn-toolbar" role="toolbar" aria-label="ボタングループのツールバー">
  <div class="btn-group mr-2" role="group" aria-label="第一グループ">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="第二グループ">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="第三グループ">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>

インプットグループとツールバーのボタングループを自由に組み合わせて可。上記の例と同様に、適切に配置するにはいくつかのユーティリティが必要になる。

見本

並べて配置

左右両端に配置

Bootstrap5.xの設定例 緑背景が変更箇所
並べて配置<div class="btn-toolbar mb-3" role="toolbar" aria-label="ボタングループを含むツールバー">
  <div class="btn-group me-2" role="group" aria-label="第1グループ">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</div>
    <input type="text" class="form-control" placeholder="インプットグループの例" aria-label="インプットグループの例" aria-describedby="btnGroupAddon">
  </div>
</div>
左右両端に配置<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="ボタングループを含むツールバー">
  <div class="btn-group" role="group" aria-label="第1グループ">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</div>
    <input type="text" class="form-control" placeholder="インプットグループの例" aria-label="インプットグループの例" aria-describedby="btnGroupAddon2">
  </div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
並べて配置<div class="btn-toolbar mb-3" role="toolbar" aria-label="ボタングループを含むツールバー">
  <div class="btn-group mr-2" role="group" aria-label="第1グループ">
    <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>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="インプットグループの例" aria-label="インプットグループの例" aria-describedby="btnGroupAddon">
  </div>
</div>
左右両端に配置<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="ボタングループを含むツールバー">
  <div class="btn-group" role="group" aria-label="第1グループ">
    <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>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="インプットグループの例" aria-label="インプットグループの例" aria-describedby="btnGroupAddon2">
  </div>
</div>
【設定】
  • div.btn-toolbar > [div.btn-group + div.btn-group・・・]《ボタングループ》
    ※div.btn-group でまとめた複数のボタングループをさらに div.btn-toolbar でまとめる
  • ボタングループだけでなく、インプットグループも設置可能
  • ボタングループの間に空白をあけるため、空白ユーティリティクラスを使用
    ※上記の場合、最後のボタングループ以外の .btn-toolbar に .me-2（行末側に0.5remのマージン）を追加
  • 配置の設定には、Flexユーティリティクラスが使用可能
【アクセシビリティの設定】
  • div.btn-toolbar に、
    • role="toolbar" 属性（支援技術にボタン・ツールバーの役割を伝える）
    • aria-label 属性（ビジュアルで目的を表現する要素に対するラベル付け）
    を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
  • 【v5.0.0-beta1】
    • RTL（右書き）の設定追加に伴い空白ユーティリティのクラス名変更
      • .mr-2 ⇒ .me-2

ボタングループのサイズ（Sizing）

グループ内のすべてのボタンにボタンサイズクラスを適用する代わりに、.btn-group-* を各 .btn-group に追加。複数のグループを入れ子にする場合は、それぞれに入れる。

サイズの種類
大きめ：.btn-group-lg
小さめ：.btn-group-sm
※デフォルト
設定例
大きめ<div class="btn-group btn-group-lg" role="group" aria-label="...">
  <button type="button" class="btn btn-outline-secondary">行頭</button>
  <button type="button" class="btn btn-outline-secondary">中</button>
  <button type="button" class="btn btn-outline-secondary">行末</button>
</div>
小さめ<div class="btn-group btn-group-sm" role="group" aria-label="...">
  <button type="button" class="btn btn-outline-secondary">行頭</button>
  <button type="button" class="btn btn-outline-secondary">中</button>
  <button type="button" class="btn btn-outline-secondary">行末</button>
</div>
【設定】
  • div.btn-group に .btn-group-{size}（上記の「サイズの種類」から選択）を追加

ドロップダウンボタン付きボタングループ（Nesting）v5.2.0設定変更

ドロップダウンを一連のボタンと組み合わせたい場合は、.btn-group を別の .btn-group 内に配置。

見本
Bootstrap5.2.0～の設定例 緑背景が変更箇所
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      ドロップダウン
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">ドロップダウンリンク</a></li>
      <li><a class="dropdown-item" href="#">ドロップダウンリンク</a></li>
    </ul>
  </div><!-- /.btn-group -->
</div><!-- /.btn-group -->
.btn-group[role=group aria-label]>(btn.btn.btn-primary[type=button])*2+(.btn-group[role=group]>btn.btn.btn-primary.dropdown-toggle[type=button data-bs-toggle=dropdown aria-expanded=false]+(ul.dropdown-menu>(li>a.dropdown-item)*2))（ボタンが2つ、ドロップダウンリンクが2つの場合）
※.btn-btn-primary の部分はお好みのボタンカラーを選んで下さい
※Bootstrap4.6.xの設定例 赤背景が変更箇所
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>
  <div class="btn-group" role="group">
    <button type="button" id="btnGroupDrop1" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      ドロップダウン
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">ドロップダウンリンク</a>
      <a class="dropdown-item" href="#">ドロップダウンリンク</a>
    </div><!-- /.dropdown-menu -->
  </div><!-- /.btn-group -->
</div><!-- /.btn-group -->
【設定】
  • .btn-group > {button.btn + button.btn・・・ + [.btn-group > button.btn.dropdown-toggle[data-bs-toggle="dropdown"] + ul.dropdown-menu > <li> > a.dropdown-item]《ドロップダウン》}
    ※.btn-group の中にボタンでなくボタングループ・ドロップダウンを入れる
【変更履歴】
  • 【v5.0.0-alpha1】
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-toggle="dropdown"] ⇒ [data-bs-toggle="dropdown"]
  • 【v5.2.0】
    • ドロップダウン：button.btn.btn-{themecolor}.dropdown-toggle の id="ID" と ul.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に（v4.6.2でバックポート）

縦積みボタングループ（Vertical variation）

一連のボタンを横ではなく縦に積み重ねて表示。分離ボタンのドロップダウンはここではサポートしない。

1. 基本の縦積みボタングループ
設定例
<div class="btn-group-vertical" role="group" aria-label="縦積みボタングループ">
  <button type="button" class="btn btn-outline-primary">ボタン</button>
  <button type="button" class="btn btn-outline-primary">ボタン</button>
  <button type="button" class="btn btn-outline-primary">ボタン</button>
  <button type="button" class="btn btn-outline-primary">ボタン</button>
</div>
2. ドロップダウン付き縦積みボタングループ
設定例
<div class="btn-group-vertical" role="group" aria-label="縦積みボタングループ">
  <button type="button" class="btn btn-primary">ボタン</button>
  <button type="button" class="btn btn-primary">ボタン</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">ドロップダウン</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item">ドロップダウンリンク</a></li>
      <li><a class="dropdown-item">ドロップダウンリンク</a></li>
    </ul>
  </div>
  <div class="btn-group dropstart">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">ドロップダウン</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item">ドロップダウンリンク</a></li>
      <li><a class="dropdown-item">ドロップダウンリンク</a></li>
    </ul>
  </div>
  <div class="btn-group dropend">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">ドロップダウン</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item">ドロップダウンリンク</a></li>
      <li><a class="dropdown-item">ドロップダウンリンク</a></li>
    </ul>
  </div>
  <div class="btn-group dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">ドロップダウン</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item">ドロップダウンリンク</a></li>
      <li><a class="dropdown-item">ドロップダウンリンク</a></li>
    </ul>
  </div>
</div>
3. 縦積みラジオ切替ボタングループ
設定例
<div class="btn-group-vertical" role="group" aria-label="縦積みラジオ切替ボタングループ">
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
  <label for="vbtn-radio1" class="btn btn-outline-danger">ラジオボタン 1</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
  <label for="vbtn-radio2" class="btn btn-outline-danger">ラジオボタン 2</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
  <label for="vbtn-radio3" class="btn btn-outline-danger">ラジオボタン 3</label>
</div>
【設定】
  • .btn-group の部分を .btn-group-vertical にする

均等サイズのボタングループ（Justified button groups）※裏技

ボタンのグループを、同じサイズに拡張して、親の幅全体に広げる。

見本
設定例
<div class="btn-group d-flex" role="group" aria-label="...">
  <button type="button" class="btn btn-info flex-fill">行頭</button>
  <button type="button" class="btn btn-warning flex-fill">中</button>
  <button type="button" class="btn btn-danger flex-fill">行末</button>
</div>
.btn-group.d-flex[role=group aria-label]>(btn.btn.btn-primary.flex-fill[type=button])*3（ボタンが3つの場合）
※.btn-primary の部分はお好みのボタンカラーを選んで下さい
【設定】
  • .btn-group.d-flex > .btn.flex-fill