badge-primary

html bootstrap5 Sample

aタグ(リンク)のバッジを作成する:badge


  <!-- aタグにbadgeを設定する、バッチをクリックすると動作する -->
  <a href="#" class="badge bg-success">badge-primary</a>

バッジ付きリストグループ:badge-pill


  • リスト項目1 14
  • リスト項目2 2
  • リスト項目3 1
  <ul class="list-group">
    <!-- justify-content-betweenで左と右端にする -->
    <!-- align-items-centerで縦整列にする -->
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目1
      <span class="badge badge-primary badge-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目2
      <span class="badge badge-primary badge-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目3
      <span class="badge badge-primary badge-pill">1</span>
    </li>
  </ul>