バッジの設定（Example）

バッジは、相対的なフォントサイズと em 単位を使用して、直接の親要素のサイズと一致するように調整される。v5以降、バッジはリンクのフォーカスとホバーのスタイルを廃止。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

コピー<h*>見出しの例 <span class="badge bg-secondary">New</span></h*>

※Bootstrap4.xの設定例 赤背景が変更箇所

<h*>見出しの例 <span class="badge badge-secondary">New</span></h*>

バッジはリンクやボタンの一部としてカウンタを提供するために使用可能。

見本

設定例

コピー<button type="button" class="btn btn-primary">
	お知らせ <span class="badge bg-light text-dark">4</span>
</button>

使用方法によっては、スクリーンリーダーや同様の支援技術のユーザーにバッジが混乱する可能性があることに注意。バッジのスタイルはその目的を視覚的に示しているが、これらのユーザーには単にバッジの内容が提示されるのみ。特定の状況によっては、これらのバッジは、文章、リンク、ボタンの最後に追加されるランダムな単語や数字のように見える場合がある。

コンテンツが明確（上記の「お知らせ」の例のように"4"がお知らせの数であると理解されている場合）でない限り、視覚的に隠された追加のテキストを含む追加のコンテンツを含めることを検討すること。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

コピー<button type="button" class="btn btn-primary">
	プロフィール <span class="badge bg-light text-dark">9</span>
	<span class="visually-hidden">未読メッセージ</span>
</button>

※Bootstrap4.xの設定例 赤背景が変更箇所

<button type="button" class="btn btn-primary">
	プロフィール <span class="badge bg-light text-dark">9</span>
	<span class="sr-only">未読メッセージ</span>
</button>

 

背景色（Background colors）v5.0.0-alpha1設定変更

バッジの外観を迅速に変更するには、背景色ユーティリティクラス（.bg-{themecolor}）を使用。Bootstrapのデフォルトの .bg-light などを使うときは、背景色ユーティリティクラスが background-color 以外の何も設定していないため、適切なスタイルとして .text-dark のような文字色ユーティリティクラスが必要となる。

背景色の種類

Bootstrap5.xの設定例 緑背景が変更箇所

コピー<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

※Bootstrap4.xの設定例 赤背景が変更箇所

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

設定例

 

ピルバッジ（Pill badges）v5.0.0-alpha1設定変更

より大きな border-radiusでバッジをより丸くするためには .rounded-pill（長丸）ユーティリティクラスを使用。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

設定例

コピー<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

※Bootstrap4.xの設定例 赤背景が変更箇所

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>