card-header-pills

bootstrap5.css

.card-header-pills {
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

html bootstrap5 Sample

カードにピル型ナビゲーションを組み込む：nav-pillsとcard-header-pills

カードのタイトル

カードの内容

ボタン

  <div class="card">
    <div class="card-header">
      <!-- ピル型のナビゲーション：card-header-pills -->
      <ul class="nav nav-pills card-header-pills">
        <li class="nav-item"> <a class="nav-link active" href="#">アクティブ</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">リンク</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">リンク</a> </li>
      </ul>
    </div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p> <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>