ボタングループ(Button group)
一連のボタンを1つにまとめたり、縦一列に積み上げる。
※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。
※"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
属性(ビジュアルで目的を表現する要素に対するラベル付け)
ボタングループは、スクリーンリーダーなどの支援技術がボタンをグループ化したものとして識別するので、それを伝えるのに適切な
role
属性と明示的なラベルが必要。ボタングループには role="group"
を、ボタンツールバーには role="toolbar"
を使用する。そして aria-label
か aria-labelledby
を使ってラベルを付ける。
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設定変更(「ボタンプラグイン」から移動)
ボタンのようなチェックボックスとラジオ切替ボタンを継ぎ目なしに見えるボタングループに組み入れ。
視覚的には、これらの切替ボタンはチェックボックス切替ボタンと同じだが、これらは支援技術では異なった方法で伝えられる。チェックボックスの切替は(外観にもかかわらず、基本的にはまだチェックボックスなので)スクリーンリーダーによって「チェック済」/「チェックなし」として伝えられ、ボタンプラグインの切替ボタンは「ボタン」/「ボタンが押された」として伝えられる。これら2つのアプローチのどちらを選択するかは、作成する切替のタイプとチェックボックスまたは実際のボタンとして伝えられるときにユーザーに切替が意味をなすかどうかによって異なる。
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】
- インプットグループのアドオン部分を囲む
div.input-group-{prepend|append}
は不要に
- インプットグループのアドオン部分を囲む
- 【v5.0.0-beta1】
- RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
.mr-2
⇒.me-2
- RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
ボタングループのサイズ(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