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
Primary Secondary Success Danger Warning Info Light Dark 
  <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>