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

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

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

目次

バッジの設定（Examples）

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

見出し（Headings）

見本

見出しの例 New

見出しの例 New

見出しの例 New

見出しの例 New

見出しの例 New
見出しの例 New
Bootstrap5.xの設定例 緑背景が変更箇所
<h*>見出しの例 <span class="badge bg-secondary">New</span></h*>
※Bootstrap4.xの設定例 赤背景が変更箇所
<h*>見出しの例 <span class="badge badge-secondary">New</span></h*>
【設定】
  • span.badge.bg-{color}
【注意】
  • .badge 単独での使用は不可（必ず .bg-{color} を追加）
  • バッジの中に表示する内容がない場合は、バッジ自体表示されない
【変更履歴】
  • 【v5.0.0-alpha1】
    • .badge.badge-{themecolor} ⇒ .badge.bg-{color}（.badge-{themecolor} は廃止）
    • リンクのフォーカスとホバーのスタイルを廃止（ボタンと区別するため）

ボタン（Buttons）

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

見本
設定例
<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>
【設定】
  • ボタンの設定内に、span.badge.bg-{color} を入れる
【変更履歴】
  • 【v5.0.0-alpha2】
    • 追加のコンテンツ：span.sr-only ⇒ span.visually-hidden

位置付け（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 bg-danger">
    99+
    <span class="visually-hidden">未読メッセージ</span>
  </span>
</button>

2.新着アラート

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

見本
設定例
<button type="button" class="btn btn-primary position-relative">
  プロフィール
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">新着アラート</span>
  </span>
</button>
【設定】
  • 未読メッセージ：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.0.0-alpha1設定変更

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

背景色の種類

Primary　.bg-primary

Secondary　.bg-secondary

Success　.bg-success

Info　.bg-info.text-dark

Warning　.bg-warning.text-dark

Danger　.bg-danger

Light　.bg-light.text-dark

Dark　.bg-dark

Black　.bg-black v5.1.0追加

White　.bg-white.text-dark.border

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>
<span class="badge bg-black">Black</span>
<span class="badge bg-white text-dark border">White</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>
設定例
【注意】
  • 背景色を .bg-warning, bg-info, .bg-light にする場合は、文字色の設定として .text-dark を追加する
  • 背景によっては、.border を追加しても可

 

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

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

見本
Primary Secondary Success Info Warning Danger Light Dark Black White
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>
<span class="badge rounded-pill bg-black">Black</span>
<span class="badge rounded-pill bg-white text-dark border">White</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>
【設定】
  • span.badge.bg-{color} に .rounded-pill を追加
【変更履歴】
  • 【v5.0.0-alpha1】
    • .badge.bg-{color}.badge-pill ⇒ .badge.bg-{color}.rounded-pill

 

Sass v5.0.0-beta3追加

変数（Variables）

デフォルトの設定
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:               $border-radius;