bootstrap4.css
.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
■ページネーション：pagination：コンポーネント：リンクの無効状態やアクティブ状態を指定する
  <nav aria-label="ページネーションの例">
    <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>
      <li class="page-item active"><a class="page-link" href="#">2 <span class="sr-only">(現ページ)</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>
■ページネーション：pagination：コンポーネント：span要素でリンクの無効状態やアクティブ状態を指定する
<nav aria-label="ページネーションの例">
  <ul class="pagination">
    <li class="page-item disabled"><span class="page-link">前</span></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><span class="page-link">2<span class="sr-only">(現ページ)</span></span></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>
<script>
  $(function() {
    $('.disabled > a.page-link').click(function() {
      return false;
    });
  });
</script>