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

バッジ（Badges） v5.0.0設定変更

小規模のカウント、ラベル付けコンポーネントであるバッジの解説と例。

※"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版での変更も含みます。
このページの項目 v5.0.0設定変更

バッジの設定（Examples）v5.2.0デザイン変更

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

見出し（Headings）

見本

見出しの例 New

見出しの例 New

見出しの例 New

見出しの例 New

見出しの例 New
見出しの例 New
Bootstrap5.xの設定例 緑背景が変更箇所
<h*>見出しの例 <span class="badge text-bg-secondary">New</span></h*>
※Bootstrap4.xの設定例 赤背景が変更箇所
<h*>見出しの例 <span class="badge badge-secondary">New</span></h*>
【設定】
  • span.badge.text-bg-{themecolor} か span.badge.bg-{color}(.text-{color})
【注意】
【変更履歴】
  • 【v5.0.0-alpha1】
    • .badge.badge-{themecolor} ⇒ .badge.bg-{color}（.badge-{themecolor} は廃止）
    • リンクのフォーカスとホバーのスタイルを廃止（ボタンと区別するため）
  • 【v5.2.0】
    • span.badge.text-bg-{themecolor} の設定も可能に
    • border-radius の値を調整したので、若干丸みを帯びたデザインに変更

ボタン（Buttons）v5.2.0設定変更

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

見本
Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所
<button type="button" class="btn btn-primary">
  お知らせ <span class="badge text-bg-light">4</span>
</button>
※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所
<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 text-bg-light">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>
【設定】
  • ボタンの設定内に、span.badge.text-bg-{themecolor} を入れる
【変更履歴】
  • 【v5.0.0-alpha2】
    • 追加のコンテンツ：span.sr-only ⇒ span.visually-hidden
  • 【v5.2.0】
    • span.badge.bg-{themecolor}(.text-{themecolor}) ⇒ span.badge.text-bg-{themecolor}

位置付け（Positioned）v5.0.2新設

ユーティリティを使用して .badge を変更し、リンクやボタンの隅に配置。

1.未読メッセージ

見本
設定例
<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
    99+
    <span class="visually-hidden">未読メッセージ</span>
  </span>
</button>
btn[type=button].btn.btn-primary.position-relative>span.position-absolute.top-0.start-100.translate-middle.badge.rounded-pill.text-bg-danger>span.visually-hidden{未読メッセージ}
※.btn-primary や .text-bg-danger の部分はお好みのカラーを選んで下さい

2.新着アラート

カウントを入れずにより一般的なインジケーターにする場合は、.badge クラスをさらにいくつかのユーティリティクラスに置き換えて作成。

見本
設定例
<button type="button" class="btn btn-primary position-relative">
  プロフィール
  <span class="position-absolute top-0 start-100 translate-middle p-2 text-bg-danger border border-light rounded-circle">
    <span class="visually-hidden">新着アラート</span>
  </span>
</button>
btn[type=button].btn.btn-primary.position-relative>span.position-absolute.top-0.start-100.translate-middle.p-2.text-bg-danger.border.border-light.rounded-circle>span.visually-hidden{新着アラート}
※.btn-primary や .text-bg-danger の部分はお好みのカラーを選んで下さい
【設定】
  • 未読メッセージ：button.btn.btn-{themecolor}.position-relative > span.position-absolute.top-0.start-100.translate-middle.badge.rounded-pill.bg-{color} > span.visually-hidden《追加のコンテンツ》
  • 新着アラート：button.btn.btn-{themecolor}.position-relative > span.position-absolute.top-0.start-100.translate-middle.p-2.bg-{color}.border.border-{themecolor}.rounded-circle > span.visually-hidden《追加のコンテンツ》
  • バッジの配置箇所は位置ユーティリティクラスの「定義済クラスの組み合わせ」を参照

背景色（Background colors）v5.2.0設定変更

.text-bg-{color} ヘルパーを使用して、文字 color とコントラストのある background-color を設定。以前は、選択した .text-{color} ユーティリティと .bg-{color} ユーティリティを手動で組み合わせてスタイリングする必要があったが、必要に応じた使用もできる。

背景色の種類
Primary.text-bg-primary Secondary.text-bg-secondary Success.text-bg-success Danger.text-bg-danger Warning.text-bg-warning Info.text-bg-info Light.text-bg-light Dark.text-bg-dark Black.bg-blackv5.1.0追加 White.bg-white.text-dark.border
Bootstrap5.2.0～の設定例 緑背景が変更箇所
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>
<span class="badge bg-black">Black</span>
<span class="badge bg-white text-dark border">White</span>

Primary：span.badge.text-bg-primary

Secondary：span.badge.text-bg-secondary

Success：span.badge.text-bg-success

Danger：span.badge.text-bg-danger

Warning：span.badge.text-bg-warning

Info：span.badge.text-bg-info

Light：span.badge.text-bg-light

Dark：span.badge.text-bg-dark

Black：span.badge.bg-black

White：span.badge.bg-white.text-dark.border

※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-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
【設定】
  • .badge.text-bg-{themecolor}
【注意】
  • 背景色を白色にする場合は、.bg-white に文字色の設定として .text-dark を追加する
  • 背景によっては、.border を追加しても可
【変更履歴】
  • 【v5.2.0】
    • .badge.bg-{themecolor}(.text-{color}) ⇒ .badge.text-bg-{themecolor}

ピルバッジ（Pill badges）v5.2.0設定変更

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

見本
Primary Secondary Success Danger Warning Info Light Dark Black White
Bootstrap5.2.0～の設定例 緑背景が変更箇所
<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>
<span class="badge rounded-pill bg-black">Black</span>
<span class="badge rounded-pill bg-white text-dark border">White</span>

Primary：span.badge.rounded-pill.text-bg-primary

Secondary：span.badge.rounded-pill.text-bg-secondary

Success：span.badge.rounded-pill.text-bg-success

Danger：span.badge.rounded-pill.text-bg-danger

Warning：span.badge.rounded-pill.text-bg-warning

Info：span.badge.rounded-pill.text-bg-info

Light：span.badge.rounded-pill.text-bg-light

Dark：span.badge.rounded-pill.text-bg-dark

Black：span.badge.rounded-pill.bg-black

White：span.badge.rounded-pill.bg-white.text-dark.border

※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-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
【設定】
  • span.badge.text-bg-{themecolor} に .rounded-pill を追加
【変更履歴】
  • 【v5.0.0-alpha1】
    • .badge.bg-{color}.badge-pill ⇒ .badge.bg-{color}.rounded-pill
  • 【v5.2.0】
    • .badge.bg-{themecolor}.rounded-pill ⇒ .badge.text-bg-{themecolor}.rounded-pill

CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更

CSS変数（Variables）v5.2.0設定移行

Bootstrapの進化するCSS変数アプローチの一環として、バッジは、リアルタイムのカスタマイズを強化するために、.badge でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定
scss/_badge.scss 内 badge-css-vars の設定--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定
scss/_variables.scss 内 badge-variables の設定$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               var(--#{$prefix}border-radius);