Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
バッジ（Badges） v4.0.0名称変更
小規模のカウント、ラベル付けコンポーネントであるバッジの解説と例。
※v3のラベルから名称変更。
バッジの設定（Example）v4.0.0名称変更
バッジは、相対的なフォントサイズと em 単位を使用して、直接の親要素のサイズと一致するように調整される。
見本
見出しの例 New
見出しの例 New
見出しの例 New
見出しの例 New
見出しの例 New
見出しの例 New
Bootstrap3.xの設定例 赤背景が変更箇所
<h*>見出しの例 <span class="label label-default">New</span></h*>Bootstrap4.xの設定例 緑背景が変更箇所
<h*>見出しの例 <span class="badge badge-secondary">New</span></h*>【設定】
span.badge.badge-{themecolor}（.badge-{themecolor}は下記の「色の種類」から選択、.badge単独での使用は不可）{themecolor}は、primary,secondary,success,info,warning,danger,light,darkのいずれかを選択- バッジの中に表示する内容が存在しない場合は、バッジ自体表示されない
【変更履歴】
- 【v4.0.0】
span.label.label-{themecolor}⇒span.badge.badge-{themecolor}
バッジはリンクやボタンの一部としてカウンタを提供するために使用可能。
見本
設定例
<button type="button" class="btn btn-primary">
お知らせ <span class="badge badge-light">4</span>
</button>使用方法によっては、スクリーンリーダーや同様の支援技術のユーザーにバッジが混乱する可能性があることに注意。バッジのスタイルはその目的を視覚的に示しているが、これらのユーザーには単にバッジの内容が提示されるのみ。特定の状況によっては、これらのバッジは、文章、リンク、ボタンの最後に追加されるランダムな単語や数字のように見える場合がある。
コンテンツが明確（上記の「お知らせ」の実例のように"4"がお知らせの数であると理解されている場合）でない限り、視覚的に隠された追加のテキストを含む追加のコンテンツを含めることを検討すること。
見本
設定例
<button type="button" class="btn btn-primary">
プロフィール <span class="badge badge-light">9</span>
<span class="sr-only">未読メッセージ</span>
</button>【設定】
- ボタンの設定内に、
span.badge.badge-{themecolor}を入れる
バッジの色（Contextual variations）v4.0.0名称変更
下記の修飾子クラスのいずれかを追加して、バッジの外観を変更する。
色の種類
Primary .badge-primary
Secondary .badge-secondary v4.0.0Defaultから変更
Success .badge-success
Info .badge-info
Warning .badge-warning
Danger .badge-danger
Light .badge-light v4.0.0追加
Dark .badge-dark v4.0.0追加
設定例
<span class="badge badge-primary">...</span>【変更履歴】
- 【v4.0.0】
- Primary：
.label-primary⇒.badge-primary - Secondary：
.label-default⇒.badge-secondary - Info：
.label-info⇒.badge-info - Success：
.label-success⇒.badge-success - Warning：
.label-warning⇒.badge-warning - Danger：
.label-danger⇒.badge-danger
- Primary：
支援技術にカラー名の意味を伝えること
カラー名を使用して意味を追加すれば視覚的な指示が提供されるが、これはスクリーンリーダーなどの支援技術のユーザーには伝わらない。カラー名で示される情報がコンテンツ自体（可視テキストなど）から明らかであるか、または .sr-only クラスで隠された追加のテキストなどの代替手段を入れるようにすること。
ピルバッジ（Pill badges）v4.0.0設定変更
.badge-pill 修飾子クラスを使用すると、より丸い（より大きな border-radius と追加の水平 padding を使用）バッジが作成可能。v3のバッジ（Badges）の代わりに使うと便利。
見本
設定例
<span class="badge badge-pill badge-primary">...</span>ボタンでの見本
Bootstrap3.xの設定例 赤背景が変更箇所
<button type="button" class="btn btn-primary">
プロフィール <span class="badge">9</span>
</button>Bootstrap4.xの設定例 緑背景が変更箇所
<button type="button" class="btn btn-primary">
プロフィール <span class="badge badge-pill badge-light">9</span>
<span class="sr-only">未読メッセージ</span>
</button>【設定】
span.badge.badge-{themecolor}に.badge-pillを追加
【変更履歴】
- 【v4.0.0】
span.badge（バッジ） ⇒span.badge.badge-{themecolor}.badge-pill
リンク（Links）v4.0.0新設
テーマカラーの .badge-* クラスを <a> 要素に使用すると、すぐにホバーとフォーカス状態のアクション可能なバッジが提供される。
見本
設定例
<a href="#" class="badge badge-primary">...</a>【設定】
a.badge.badge-{themecolor}