bootstrap4.css
.badge-light {
color: #212529;
background-color: #f8f9fa;
}
bootstrap4.css
a.badge-light:hover, a.badge-light:focus {
color: #212529;
background-color: #dae0e5;
}
bootstrap4.css
a.badge-light:focus, a.badge-light.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
■バッジ:badge:コンポーネント:バッジ基本的な使用例 badge
primary 1
secondary 11
success 111
danger 1111
warning 0
info 99
light 999
dark 9999
<p>primary <span class="badge badge-primary">1</span></p>
<p>secondary <span class="badge badge-secondary">11</span></p>
<p>success <span class="badge badge-success">111</span></p>
<p>danger <span class="badge badge-danger">1111</span></p>
<p>warning <span class="badge badge-warning">0</span></p>
<p>info <span class="badge badge-info">99</span></p>
<p>light <span class="badge badge-light">999</span></p>
<p>dark <span class="badge badge-dark">9999</span></p>
■バッジ:badge:コンポーネント:ピル型のバッジを作成する badge-pill
<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>
■バッジ:badge:コンポーネント:バッジによるカウンター表示 button
<button type="button" class="btn btn-primary">
button <span class="badge badge-light">4</span>
</button>
■バッジ:badge:コンポーネント:スクリーンリーダー 視覚支援 非表示テキスト sr-only
<button type="button" class="btn btn-primary">
メッセージ <span class="badge badge-light">9</span>
<span class="sr-only">未読メッセージ</span>
</button>