Bootstrap 4 – Pagination

Bootstrap cung cấp class pagination để tạo thành pagination.

Pagination là nơi giúp điều hướng trong trường hợp có nhiều trang. Ví dụ kết quả tìm kiếm có nhiều trang Pagination giúp bạn chuyển hướng giữa các trang.

Pagination mặc định

Thêm class=”pagination” vào element <ul> để tạo list trang.

Thêm .page-item vào mỗi <li> và .page-link vào mỗi link.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">

    <nav>
      <ul class="pagination">
        <li class="page-item">
          <a href="#" class="page-link" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">1</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">2</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">3</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">4</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">5</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">6</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">7</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>

  </div>
</body>

</html>

Active cho Current Page

Thêm class .active vào li trang hiện tại.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">

    <nav>
      <ul class="pagination">
        <li class="page-item">
          <a href="#" class="page-link" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">1</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">2</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">3</a>
        </li>
        <li class="page-item active">
          <a href="#" class="page-link">4</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">5</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">6</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">7</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>

  </div>
</body>

</html>

Disable 1 trang

Thêm .disabled vào element li để disable nó.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">

    <nav>
      <ul class="pagination">
        <li class="page-item">
          <a href="#" class="page-link" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">1</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">2</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">3</a>
        </li>
        <li class="page-item disabled">
          <a href="#" class="page-link">4</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">5</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">6</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">7</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>

  </div>
</body>

</html>

Pagination Size

Dùng .pagination-lg, .pagination-sm trong element <ul> để tăng hoặc giảm size của pagination.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">

    <nav>
      <ul class="pagination pagination-lg">
        <li class="page-item">
          <a href="#" class="page-link" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">1</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">2</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">3</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">4</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">5</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">6</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">7</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>

    <nav>
      <ul class="pagination">
        <li class="page-item">
          <a href="#" class="page-link" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">1</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">2</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">3</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">4</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">5</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">6</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">7</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>

    <nav>
      <ul class="pagination pagination-sm">
        <li class="page-item">
          <a href="#" class="page-link" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">1</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">2</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">3</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">4</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">5</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">6</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link">7</a>
        </li>
        <li class="page-item">
          <a href="#" class="page-link" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>

  </div>
</body>

</html>