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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

ボタングループ（Button group） v4.0.0一部変更

一連のボタンを1つにまとめ、グループ化してボタングループにし、それらをJavaScriptでスーパーパワー化。

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

.btn-group で .btn を含む一連のボタンを囲む。オプションとしてJavaScriptのラジオボタンとチェックボックスのスタイルの動作をボタンプラグインで追加。

見本

●裏技

※v3のDefaultボタン（.btn-default）の代用

設定例
<div class="btn-group" role="group" aria-label="基本のボタングループ">
	<button type="button" class="btn btn-secondary">左</button>
	<button type="button" class="btn btn-secondary">中</button>
	<button type="button" class="btn btn-secondary">右</button>
</div>
※裏技<div class="btn-group" role="group" aria-label="基本のボタングループ">
	<button type="button" class="btn page-link text-dark d-inline-block">左</button>
	<button type="button" class="btn page-link text-dark d-inline-block">中</button>
	<button type="button" class="btn page-link text-dark d-inline-block">右</button>
</div>

【設定】

  • div.btn-group > [button.btn + button.btn ・・・]《ボタン》
    ※複数のボタンを .btn-group でまとめる

【アクセシビリティの設定】

  • div.btn-group には、
    • role="group" 属性（支援技術にボタン・グループの役割を伝える）
    • aria-label 属性（ビジュアルで目的を表現する要素に対するラベル付け）
    を入れる

 

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

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

見本
Bootstrap3.xの設定例
<div class="btn-toolbar" role="toolbar" aria-label="ボタングループのツールバー">
	<div class="btn-group" role="group" aria-label="第一グループ">
		<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="btn-group" 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-secondary">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-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="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-secondary">8</button>
	</div>
</div>

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

見本

●並べて配置

●左右両端に配置

設定例
並べて配置<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 に .mr-2（右側に0.5remのマージン）を追加
  • 配置の設定には、Flexユーティリティクラスが使用可能

【アクセシビリティの設定】

  • div.btn-toolbar に、
    • role="toolbar"属性（支援技術にボタン・ツールバーの役割を伝える）
    • aria-label属性（ビジュアルで目的を表現する要素に対するラベル付け）
    を入れる

【変更履歴】

 

ボタングループのサイズ（Sizing）v4.0.0一部廃止

グループ内のすべてのボタンにボタンサイズクラスを適用する代わりに、.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-secondary">左</button>
	<button type="button" class="btn btn-secondary">中</button>
	<button type="button" class="btn btn-secondary">右</button>
</div>
小さめ<div class="btn-group btn-group-sm" role="group" aria-label="...">
	<button type="button" class="btn btn-secondary">左</button>
	<button type="button" class="btn btn-secondary">中</button>
	<button type="button" class="btn btn-secondary">右</button>
</div>

【設定】

  • div.btn-group に .btn-group-{size}（上記の「サイズの種類」から選択）を追加

【変更履歴】

  • 【v4.0.0】
    • 極小：.btn-group-xs は廃止

 

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

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

見本
ドロップダウンリンク ドロップダウンリンク
Bootstrap3.xの設定例 赤背景が変更箇所
<div class="btn-group" role="group" aria-label="...">
	<button type="button" class="btn btn-default">1</button>
	<button type="button" class="btn btn-default">2</button>
	<div class="btn-group" role="group">
		<button type="button" id="btnGroupDrop1" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			ドロップダウン <span class="caret"></span>
		</button>
		<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
			<li><a href="#">ドロップダウンリンク</a></li>
			<li><a href="#">ドロップダウンリンク</a></li>
		</ul>
	</div><!-- /.btn-group -->
</div><!-- /.btn-group -->
Bootstrap4.6.2～の設定例 緑背景が変更箇所
<div class="btn-group" role="group" aria-label="...">
	<button type="button" class="btn btn-secondary">1</button>
	<button type="button" class="btn btn-secondary">2</button>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			ドロップダウン
		</button>
		<div class="dropdown-menu">
			<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-toggle="dropdown"] + div.dropdown-menu > a.dropdown-item]《ドロップダウン》}
    ※.btn-group の中にボタンでなくボタングループ・ドロップダウンを入れる

【アクセシビリティの設定】

  • .dropdown-toggle と同じ要素に、aria-expanded="false" 属性（要素の開閉の状態を示す）を入れる

【変更履歴】

  • 【v4.0.0】
    • キャレット（▼）： <span class="caret"></span> の設定は不要
    • ドロップダウンリンク：ul.dropdown-menu > li ⇒ div.dropdown-menu > a.dropdown-item
  • 【v4.6.1】
    • ドロップダウンボタンの設定で aria-haspopup="true" 属性（ポップアップメニューが存在するかどうかを示す）が不要に
  • 【v4.6.2】
    • ドロップダウン：button.btn.btn-{themecolor}.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）※裏技、v4.5.0設定変更

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

見本
Bootstrap3.xの設定例 赤背景が変更箇所
<div class="btn-group btn-group-justified" role="group" aria-label="...">
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-info">左</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-warning">中</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-danger">右</button>
	</div>
</div>
Bootstrap4.xの設定例 緑背景が変更箇所
<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.w-100

【変更履歴】

  • 【v4.0.0】
    • .btn-group-justified は廃止
    • 各ボタンをボタングループで囲む必要がなくなった
  • 【v4.5.0】
    • .btn.w-100 ⇒ .btn.flex-fill

ページ移動