page-item active

bootstrap5.css

bootstrap5.css
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

html bootstrap5 Sample

リンクの無効状態やアクティブ状態を指定する:activeとdisabled


  <nav>
    <ul class="pagination">
      <!-- リンク無効 -->
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <!-- 現在のページ位置 visually-hiddenで視覚支援説明 -->
      <li class="page-item active"><a class="page-link" href="#">2 <span class="visually-hidden">現ページ</span></a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>