nav-pills

bootstrap5.css

bootstrap5.css
.nav-pills .nav-link {
  border-radius: 0.25rem;
}
bootstrap5.css
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #007bff;
}

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>

ピル型ナビゲーション：nav-pills

  <ul class="nav nav-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 disabled" href="#">無効</a></li>
  </ul>

ナビゲ―ション項目の幅を調整：nav-fill

  <!-- 収まらない場合は、改行される -->
  <nav class="nav nav-pills nav-fill">
    <a class="nav-item nav-link active" href="#">リンク1</a>
    <a class="nav-item nav-link" href="#">リンク2</a>
    <a class="nav-item nav-link active" href="#">長いテキストリンク</a>
    <a class="nav-item nav-link" href="#">リンク3</a>
  </nav>

ナビゲ―ション項目の幅を調整：nav-justified

  <!-- 幅に合わせる、収まらない場合は高さが変わる -->
  <nav class="nav nav-pills nav-justified">
    <a class="nav-item nav-link active" href="#">リンク1</a>
    <a class="nav-item nav-link" href="#">リンク2</a>
    <a class="nav-item nav-link active" href="#">長いテキストリンク</a>
    <a class="nav-item nav-link" href="#">リンク3</a>
  </nav>

ナビゲーション：flex

  <nav class="nav nav-pills flex-column flex-sm-row">
    <a class="flex-sm-fill text-sm-center nav-link active" href="#">アクティブ</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">リンク</a>
    <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">無効</a>
  </nav>

ピル型ナビゲーションドロップダウン：nav-linkとdropdown-toggle

  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>