card-header-tabs

bootstrap5.css

.card-header-tabs {
  margin-right: -0.625rem;
  margin-bottom: -0.75rem;
  margin-left: -0.625rem;
  border-bottom: 0;
}

html bootstrap5 Sample

カードにナビゲーションを組み込む：nav-tabs

カードのタイトル

カードの内容

ボタン

  <div class="card">
    <!-- カードのヘッダー -->
    <div class="card-header">
      <!-- タブ型のナビゲーション：card-header-tabs -->
      <ul class="nav nav-tabs card-header-tabs">
        <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>