バッジ：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-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>

aタグ（リンク）のバッジを作成する：badge

badge-primary 

  <a href="#" class="badge badge-success">badge-primary</a>

バッジによるカウンター表示：button


  <!-- buttonにspanでカウンターを設定する -->
  <!-- spanにbadgeを設定し、badgeの色も設定する -->
  <button type="button" class="btn btn-primary">
    button <span class="badge badge-light">4</span>
  </button>

スクリーンリーダー視覚支援 非表示テキスト：sr-only


  <!-- sr-onlyは非表示で、スクリーンリーダのみ読み上げます -->
  <button type="button" class="btn btn-primary">
    未読メッセージ <span class="badge badge-light">9</span>
    <span class="sr-only">未読メッセージ</span>
  </button>