メインコンテンツへスキップ

ボタングループ(Button group)

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

目次

基本のボタングループ(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>
【設定】
  • 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.btn-{themecolor}.active を追加
アクセシビリティの設定】
  • .active と同じ要素に aria-current="true"(支援技術に現在のアイテムであることを伝える)を入れる
【変更履歴】
  • 【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 class="btn btn-outline-primary" for="btncheck1">チェックボックス 1</label>

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

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

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

	<input type="radio" class="btn-check" id="btnradio3" autocomplete="off">
	<label class="btn btn-outline-primary" for="btnradio3">ラジオボタン 3</label>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="btn-group btn-group-toggle" data-toggle="buttons">
	<label class="btn btn-outline-primary">
		<input type="radio" id="btnradio1"> ラジオボタン 1
	</label>
	<label class="btn btn-outline-primary">
		<input type="radio" id="btnradio2"> ラジオボタン 2
	</label>
	<label class="btn btn-outline-primary">
		<input type="radio" 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>
※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-dark">行頭</button>
	<button type="button" class="btn btn-outline-dark">中</button>
	<button type="button" class="btn btn-outline-dark">行末</button>
</div>
小さめ<div class="btn-group btn-group-sm" role="group" aria-label="...">
	<button type="button" class="btn btn-outline-dark">行頭</button>
	<button type="button" class="btn btn-outline-dark">中</button>
	<button type="button" class="btn btn-outline-dark">行末</button>
</div>
【設定】
  • div.btn-group.btn-group-{size}(上記の「サイズの種類」から選択)を追加

 

ドロップダウンボタン付きボタングループ(Nesting)v5.0.0-beta1設定変更

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

見本
Bootstrap5.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-bs-toggle="dropdown" aria-expanded="false">
			ドロップダウン
		</button>
		<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
			<li><a class="dropdown-item" href="#">ドロップダウンリンク</a></li>
			<li><a class="dropdown-item" href="#">ドロップダウンリンク</a></li>
		</ul>
	</div><!-- /.btn-group -->
</div><!-- /.btn-group -->
※Bootstrap4.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 の中にボタンでなくボタングループ・ドロップダウンを入れる
  • ボタンとドロップダウンを関連付けるため、button.btn.dropdown-toggle にはid="ID"div.dropdown-menu には aria-labelledby="ID" 属性を入れる
【変更履歴】

 

縦積みボタングループ(Vertical variation)

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

見本
設定例
<div class="btn-group-vertical" role="group" aria-label="縦積みボタングループ">
	...
</div>
【設定】

 

均等サイズのボタングループ(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 > .btn.flex-fill