Pagination Bootstrap là gì: Cách phân trang hiệu quả với Bootstrap

Khi làm việc với giao diện người dùng, đặc biệt là các trang có dữ liệu lớn như danh sách sản phẩm, bảng kết quả tìm kiếm, hay bài viết blog,… thì việc chia nhỏ nội dung thành từng trang (pagination) là điều cần thiết. Bootstrap hỗ trợ bạn thực hiện việc phân trang này nhanh chóng và linh hoạt thông qua component Pagination. 

Đọc bài viết này để hiểu ngay:

• Pagination là gì và tại sao nên dùng nó?
• Cấu trúc cơ bản của pagination trong Bootstrap
• Cách tùy chỉnh icon, kích thước, vị trí pagination trong Bootstrap
• Hướng dẫn xây dựng pagination với responsive design
• Khi nào nên dùng Breadcrumb, khi nào dùng Pagination?
• Các lưu ý quan trọng khi sử dụng pagination

Pagination là gì?

Pagination (phân trang) là cách chia nội dung lớn thành nhiều phần nhỏ để hiển thị  theo từng trang. Nó thường được sử dụng để hiển thị các danh sách dài như: bài viết, sản phẩm, bình luận, kết quả tìm kiếm,…

Thay vì phải tải tất cả dữ liệu và hiển thị cùng một lúc (gây chậm và khó đọc), người dùng sẽ điều hướng qua các trang được đánh số như 1, 2, 3 hoặc nút Next (trang kế tiếp) / Previous (trang trước đó).

Lợi ích khi sử dụng Pagination trong Bootstrap

Bootstrap hỗ trợ pagination dưới dạng một component sẵn có, giúp bạn triển khai phân trang nhanh mà không cần viết CSS thủ công. Giao diện mặc định đã được tối ưu để hài hòa với toàn bộ hệ thống thiết kế của Bootstrap.

Hình ảnh minh họa về pagination trong Bootstrap.

Việc sử dụng Pagination của Bootstrap mang lại nhiều lợi ích như:

• Triển khai nhanh: Bootstrap cung cấp sẵn các class tiện ích có sẵn, tránh viết lại CSS, HTML thủ công
• Giao diện đẹp: Mặc định đã có style hiện đại, nhất quán với phong cách của trang web
• Dễ tuỳ chỉnh: Hỗ trợ icon, responsive kích thước để phù hợp với các loại thiết bị
• Tương thích cao: Chạy tốt trên mọi thiết bị, trình duyệt

Các lớp và cấu trúc Pagination trong Bootstrap

Cấu trúc HTML cơ bản

Pagination trong Bootstrap được tạo bằng danh sách không thứ tự <ul> kết hợp với các mục danh sách <li> và liên kết <a>. Bootstrap sử dụng ba class chính để xây dựng pagination:

• .pagination: Gắn vào thẻ <ul>, đây là lớp chính để áp dụng style phân trang
• .page-item: Gắn vào từng thẻ <li>, đóng vai trò như một nút
• .page-link: Gắn vào thẻ <a> hoặc <button> bên trong mỗi .page-item, hiển thị nội dung số trang hoặc icon.

Những thành phần này nên được bao bọc trong thẻ <nav> để trình đọc màn hình nhận diện đây là khu vực điều hướng. Ngoài ra, để tăng tính truy cập (accessibility), nên sử dụng thuộc tính aria-label để mô tả rõ mục đích của pagination, đặc biệt nếu trang có nhiều vùng điều hướng.

Ví dụ pagination cơ bản:

     <nav aria-label="Ví dụ về pagination">
       <ul class="pagination">
         <li class="page-item"><a class="page-link" href="#">Trước</a></li>
         <li class="page-item"><a class="page-link" href="#">1</a></li>
         <li class="page-item"><a class="page-link" href="#">2</a></li>
         <li class="page-item"><a class="page-link" href="#">3</a></li>
         <li class="page-item"><a class="page-link" href="#">4</a></li>
         <li class="page-item"><a class="page-link" href="#">5</a></li>
         <li class="page-item"><a class="page-link" href="#">Sau</a></li>
       </ul>
     </nav>

Trong ví dụ trên:

• Thẻ <nav> được gắn aria-label=“Ví dụ về pagination” để hỗ trợ công cụ đọc màn hình hiểu rõ mục đích điều hướng
• Mỗi nút phân trang là một phần tử <li> với class .page-item, bao quanh liên kết .page-link
• Giao diện mặc định của Bootstrap sẽ hiển thị các nút nằm ngang, có khoảng cách đều và tương tác tốt với chuột hoặc thiết bị cảm ứng

Kết quả hiển thị:

Các trạng thái đặc biệt của phần tử trong pagination

Bootstrap hỗ trợ hai trạng thái quan trọng trong pagination là active và disabled, giúp người dùng nhận biết trang hiện tại hoặc các nút không thể thao tác.

Trạng thái active (đánh dấu trang đang được xem)

Để đánh dấu trang hiện tại, bạn thêm class .active vào phần tử .page-item tương ứng. Bên trong đó, nếu sử dụng thẻ <a>, nên thêm thuộc tính aria-current=“page” để hỗ trợ trình đọc màn hình hiểu rằng đây là trang đang được hiển thị.

Ví dụ:

     <nav aria-label="Pagination">
       <ul class="pagination">
         <li class="page-item"><a class="page-link" href="#">Trước</a></li>
         <li class="page-item"><a class="page-link" href="#">1</a></li>
         <li class="page-item active">
           <a class="page-link" href="#" aria-current="page">2</a>
         </li>
         <li class="page-item"><a class="page-link" href="#">3</a></li>
         <li class="page-item"><a class="page-link" href="#">Sau</a></li>
       </ul>
     </nav>

Trong đó, trang số 2 được áp dụng .active để đánh dấu trang hiện tại. Kết quả hiển thị:

Ngoài ra, nếu bạn không muốn trang hiện tại có thể bấm được, có thể thay thế thẻ <a> bằng <span>, trong trường hợp này, không cần dùng aria-current:

   <li class="page-item active">
     <span class="page-link">2</span>
   </li>

Trạng thái disabled (nút không khả dụng)

Trạng thái .disabled thường dùng cho các nút như “Trước” (Previous) hoặc “Sau” (Next) khi người dùng đang ở trang đầu hoặc trang cuối. Khi thêm class .disabled vào .page-item, Bootstrap sẽ tự động áp dụng style mờ và vô hiệu hóa thao tác chuột bằng pointer-events: none.

Tuy nhiên, để đảm bảo nút không thể được chọn bằng bàn phím, bạn nên thêm tabindex=“-1” vào thẻ <a>, đồng thời xử lý logic vô hiệu hóa bằng JavaScript nếu cần.

Ví dụ:

     <nav aria-label="Pagination">
       <ul class="pagination">
         <li class="page-item"><a class="page-link" href="#">Trước</a></li>
         <li class="page-item"><a class="page-link" href="#">1</a></li>
         <li class="page-item"><a class="page-link" href="#">2</a></li>
         <li class="page-item active"><a class="page-link" href="#" aria-current="page">3</a></li>
         <li class="page-item disabled"><a class="page-link" href="#">Sau</a></li>
       </ul>
     </nav>

Trong đó, trang hiện tại là trang số 3, không thể sang trang sau, nên sử dụng .disabled để vô hiệu hóa nút “Sau”. Kết quả hiển thị:

Tương tự như trạng thái active, bạn cũng có thể dùng <span> để thay thế hoàn toàn liên kết, tránh mọi hành động không mong muốn:

   <li class="page-item disabled">
     <span class="page-link">Sau</span>
   </li>

Hướng dẫn theo tác cơ bản với pagination trong Bootstrap

Tích hợp icon vào Pagination

Ngoài việc sử dụng văn bản như “Previous” hoặc “Next”, bạn hoàn toàn có thể thay thế bằng biểu tượng (icon) để tạo giao diện trực quan và gọn gàng hơn. Bootstrap không bắt buộc phải dùng hệ thống icon cụ thể nào, nhưng nếu bạn đã sử dụng Bootstrap Icons, việc tích hợp sẽ rất dễ dàng.

Ví dụ kết hợp Bootstrap Icon trong Pagination:

     <nav aria-label="Pagination with icons only">
       <ul class="pagination">
         <li class="page-item">
           <a class="page-link" href="#" aria-label="Trang trước">
             <i class="bi bi-caret-left-fill" aria-hidden="true"></i>
           </a>
         </li>
         <li class="page-item"><a class="page-link" href="#">1</a></li>
         <li class="page-item"><a class="page-link" href="#">2</a></li>
         <li class="page-item"><a class="page-link" href="#">3</a></li>
         <li class="page-item">
           <a class="page-link" href="#" aria-label="Trang sau">
             <i class="bi bi-caret-right-fill" aria-hidden="true"></i>
           </a>
         </li>
       </ul>
     </nav>

Trong ví dụ trên, các nút điều hướng “Trước” và “Sau” đã được thay hoàn toàn bằng biểu tượng bi-caret-left-fill và bi-caret-right-fill từ thư viện Bootstrap Icon.

Trường hợp bạn chỉ cần ký hiệu đơn giản như dấu ngoặc kép « hoặc », có thể sử dụng trực tiếp trong HTML. Tuy nhiên, để đảm bảo hỗ trợ tốt cho người dùng sử dụng trình đọc màn hình, cần kết hợp với thuộc tính aria-label mô tả ý nghĩa của biểu tượng, đồng thời dùng aria-hidden=“true” để ẩn ký hiệu khỏi nội dung đọc.

Ví dụ dưới đây minh họa cách sử dụng dấu ngoặc kép thay cho văn bản:

     <nav aria-label="Pagination">
       <ul class="pagination">
         <li class="page-item">
           <a class="page-link" href="#" aria-label="Previous">
             <span aria-hidden="true">&laquo;</span>
           </a>
         </li>
         <li class="page-item"><a class="page-link" href="#">1</a></li>
         <li class="page-item"><a class="page-link" href="#">2</a></li>
         <li class="page-item"><a class="page-link" href="#">3</a></li>
         <li class="page-item">
           <a class="page-link" href="#" aria-label="Next">
             <span aria-hidden="true">&raquo;</span>
           </a>
         </li>
       </ul>
     </nav>

Trong ví dụ trên:

• Các nút điều hướng “Trước” và “Sau” được thay bằng ký hiệu « và »
• aria-label cung cấp văn bản thay thế cho icon (dành cho trình đọc màn hình)
• aria-hidden=“true” đảm bảo chỉ có nội dung văn bản (không phải biểu tượng) được đọc

Kết quả hiển thị:

Tùy chỉnh kích thước pagination

Bootstrap cung cấp sẵn các class tiện ích để thay đổi kích thước của pagination, giúp bạn linh hoạt điều chỉnh giao diện theo nhu cầu thiết kế. Ngoài kích thước mặc định, bạn có thể làm pagination lớn hơn hoặc nhỏ hơn bằng cách thêm class .pagination-lg hoặc .pagination-sm vào danh sách <ul>.

Ví dụ về 3 kích cỡ của pagination Bootstrap:

     <nav aria-label="Pagination">
       <ul class="pagination pagination-sm">
		...
       </ul>
     </nav> 
     <nav aria-label="Pagination">
       <ul class="pagination">
		...
       </ul>
     </nav> 
     <nav aria-label="Pagination">
       <ul class="pagination pagination-lg">
		...
       </ul>
     </nav>

Kết quả hiển thị:

Căn chỉnh Pagination

Mặc định, các nút phân trang trong Bootstrap sẽ được căn trái trong khối chứa. Tuy nhiên, nếu bạn muốn căn giữa hoặc căn phải các nút pagination, bạn có thể sử dụng các lớp tiện ích Flexbox như .justify-content-center hoặc .justify-content-end.

Ví dụ: Căn giữa pagination:

     <nav aria-label="Page navigation (center)">
       <ul class="pagination justify-content-center">
         <li class="page-item disabled">
           <a class="page-link">Previous</a>
         </li>
         <li class="page-item"><a class="page-link" href="#">1</a></li>
         <li class="page-item"><a class="page-link" href="#">2</a></li>
         <li class="page-item"><a class="page-link" href="#">3</a></li>
         <li class="page-item"><a class="page-link" href="#">Next</a></li>
       </ul>
     </nav>

Kết quả hiển thị:

Hoặc ví dụ pagination căn phải:

     <nav aria-label="Page navigation (center)">
       <ul class="pagination justify-content-end">
         <li class="page-item disabled">
           <a class="page-link">Previous</a>
         </li>
         <li class="page-item"><a class="page-link" href="#">1</a></li>
         <li class="page-item"><a class="page-link" href="#">2</a></li>
         <li class="page-item"><a class="page-link" href="#">3</a></li>
         <li class="page-item"><a class="page-link" href="#">Next</a></li>
       </ul>
     </nav>

Kết quả hiển thị:

Hướng dẫn xây dựng pagination với responsive design

Mặc dù Bootstrap không cung cấp một cấu trúc pagination tự động ẩn số trang hoặc thu gọn cho thiết kế responsive, bạn vẫn có thể linh hoạt kiểm soát cách pagination hiển thị trên các kích thước màn hình khác nhau bằng cách kết hợp các class hiển thị theo breakpoint như d-none, d-sm-block, d-md-none,…

Bạn có thể giảm số lượng trang hiển thị hoặc thay thế bằng dấu “…” khi màn hình nhỏ, giúp pagination gọn hơn mà vẫn giữ được chức năng điều hướng.

Ví dụ:

     <nav aria-label="Pagination responsive">
       <ul class="pagination justify-content-center">
         <li class="page-item"><a class="page-link" href="#">«</a></li>


         <li class="page-item"><a class="page-link" href="#">1</a></li>
         <li class="page-item"><a class="page-link" href="#">2</a></li>
         <li class="page-item"><a class="page-link" href="#">3</a></li>


         <li class="page-item d-none d-md-block"><a class="page-link" href="#">4</a></li>
         <li class="page-item d-none d-md-block"><a class="page-link" href="#">5</a></li>
  
         <li class="page-item"><a class="page-link" href="#">»</a></li>
       </ul>
     </nav> 

Trong đó:

• Một số nút số (4, 5) sẽ tự động ẩn đi trên màn hình nhỏ bằng cách sử dụng d-none kết hợp d-sm-block và d-md-block
• Chỉ giữ lại các nút điều hướng chính như “«” và trang số 1, 2, 3 để hiển thị rõ ràng trên thiết bị di động
• Trên màn hình lớn hơn, toàn bộ số trang sẽ hiện đầy đủ

Kết quả hiển thị:

Trên PC:

Trên SP:

Đọc chi tiết về cách kết hợp các điểm ngắt (breakpoint) Responsive trong Bootstrap

Các cách tùy chỉnh giao diện Pagination trong Bootstrap

Component Pagination của Bootstrap có giao diện mặc định đơn giản, dễ sử dụng. Tuy nhiên, bạn hoàn toàn có thể tùy chỉnh giao diện phân trang để phù hợp với thiết kế tổng thể của trang web. Dưới đây là những cách phổ biến để tuỳ biến giao diện Pagination:

Tùy chỉnh bằng CSS

Bạn có thể ghi đè các class có sẵn của Bootstrap như .page-link, .page-item để thay đổi màu sắc, bo góc, khoảng cách, hiệu ứng hover…

Ví dụ:

<nav aria-label="Custom pagination">
  <ul class="pagination">
     <li class="page-item active"><a class="page-link" href="#">1</a></li>
     <li class="page-item"><a class="page-link" href="#">2</a></li>
     <li class="page-item"><a class="page-link" href="#">3</a></li>
     <li class="page-item"><a class="page-link" href="#">4</a></li>
  </ul>
</nav>

<style>
.page-link {
 border-radius: 50px;
 color: #0d6efd;
 transition: all 0.3s ease;
}

.page-link:hover {
 background-color: #0d6efd;
 color: #fff;
}

.page-item.active .page-link {
 background-color: #0d6efd;
 color: #fff;
 border-color: #0d6efd;
}
</style>

Trong đó:

• Ghi đè class .page-link để các nút phân trang có bo tròn, chuyển màu mượt khi hover, và nổi bật ở trang đang chọn.

Kết quả hiển thị:

Tùy chỉnh bằng Sass

Nếu bạn sử dụng Bootstrap từ source SCSS (thay vì bản build sẵn, Bootstrap CDN), bạn có thể tuỳ chỉnh các biến Sass trước khi biên dịch để thay đổi toàn bộ hệ thống phân trang một cách đồng bộ.

Ví dụ thay đổi các biến liên quan đến định dạng màu sắc và khoảng cách trong pagination:

$pagination-color: #0d6efd;
$pagination-hover-color: #fff;
$pagination-hover-bg: #0d6efd;
$pagination-border-radius: 50px;
$pagination-padding-y: 0.5rem;
$pagination-padding-x: 1rem;

Sau khi tuỳ chỉnh, bạn tiến hành biên dịch lại Bootstrap để áp dụng các thay đổi. Đọc chi tiết về CSS trong Bootstrap.

So sánh Pagination với Breadcrumb trong Bootstrap

Pagination và Breadcrumb đều là những thành phần điều hướng (navigation components) được Bootstrap hỗ trợ với cú pháp rõ ràng, dễ dùng. Chúng hỗ trợ người dùng di chuyển qua nội dung hoặc hiểu vị trí hiện tại của họ trong hệ thống website.

Tuy nhiên, chúng có mục đích sử dụng, cách hiển thị và cách triển khai của chúng lại khác nhau. Dưới đây là bảng so sánh chi tiết:

Khi nào nên dùng Breadcrumb, khi nào dùng Pagination?

Dùng Breadcrumb khi bạn muốn

• Hiển thị thứ bậc trang: ví dụ Trang chủ > Sản phẩm > Áo thun > Áo thun nam
• Cải thiện điều hướng và trải nghiệm người dùng ở trang chi tiết

Dùng Pagination khi bạn có

• Danh sách lớn cần chia trang: ví dụ danh sách bài viết, danh mục sản phẩm
• Nhiều dữ liệu cần tải theo trang để tránh ảnh hưởng hiệu năng

4 lưu ý quan trọng khi sử dụng Pagination Bootstrap

Khi sử dụng component Pagination trong Bootstrap, bên cạnh việc triển khai đúng cú pháp và thiết kế giao diện đẹp mắt, bạn cũng nên lưu ý một số điểm quan trọng dưới đây để đảm bảo trải nghiệm người dùng tốt, khả năng tương thích cao, và dễ bảo trì về sau:

1. Luôn bọc Pagination trong thẻ <nav>

Hãy đảm bảo gắn thêm thuộc tính aria-label để mô tả rõ vai trò của vùng điều hướng. Thẻ <nav> không chỉ giúp cải thiện tính ngữ nghĩa (semantic HTML) mà còn hỗ trợ tốt cho các trình đọc màn hình.

   <nav aria-label="Pagination">
     <ul class="pagination">...</ul>
   </nav>

2. Sử dụng aria-current=“page” cho trang đang hiển thị

Khi đánh dấu một trang đang được chọn (.active), bạn nên thêm thuộc tính aria-current=“page” để tăng tính accessibility – giúp người dùng khiếm thị biết được họ đang ở trang nào khi dùng trình đọc màn hình.

   <li class="page-item active">
     <a class="page-link" href="#" aria-current="page">2</a>
   </li>

3. Đảm bảo các nút “Trước” và “Sau” được xử lý đúng trạng thái

Khi người dùng ở trang đầu tiên hoặc trang cuối cùng, hãy sử dụng .disabled để vô hiệu hoá các nút điều hướng không khả dụng. Đồng thời, nên thêm tabindex=“-1” để tránh người dùng nhấn phím Tab chọn vào nút không dùng được.

   <li class="page-item disabled">
     <a class="page-link" href="#" tabindex="-1">Trước</a>
   </li>

4. Không nên để quá nhiều nút phân trang liên tục

Nếu bạn có danh sách trên 10–15 trang, hãy xem xét thêm nút rút gọn (…) hoặc sử dụng nút “Trang đầu / Trang cuối” để điều hướng dễ hơn. Việc hiển thị tất cả số trang liên tiếp có thể gây rối và ảnh hưởng đến trải nghiệm người dùng.

Các câu hỏi thường gặp về Pagination Bootstrap

Làm sao để thay đổi số lượng trang hiển thị trong Pagination?

Bootstrap Pagination chỉ cung cấp giao diện hiển thị, chứ không tự động tạo số lượng trang. Vì vậy, để thay đổi số lượng trang hiển thị, bạn cần:

• Phân trang tĩnh (HTML viết tay): thêm hoặc bớt số lượng <li> trong danh sách <ul class=“pagination”> theo số trang mong muốn.
• Phân trang động (dữ liệu thay đổi theo trang): dùng JavaScript (hoặc framework như React/Vue) kết hợp với dữ liệu backend hoặc mảng dữ liệu cục bộ.

Sau đó, bạn:

• Tính tổng số trang dựa trên số lượng item và số item trên mỗi trang
• Tạo danh sách số trang trong vòng lặp
• Render pagination tương ứng

Ví dụ với JavaScript đơn giản tự động tạo danh sách số trang phân trang (1, 2, 3…) dựa trên tổng số item và số item mỗi trang:

const totalItems = 50; // Tổng số item cần phân trang
const itemsPerPage = 10; // Mỗi trang hiển thị 10 item
const totalPages = Math.ceil(totalItems / itemsPerPage); // Tính tổng số trang

let paginationHTML = '';
for (let i = 1; i <= totalPages; i++) {
  paginationHTML += `<li class="page-item"><a class="page-link" href="#">${i}</a></li>`;
}

document.querySelector('.pagination').innerHTML = paginationHTML;

Trong đó:

• Với 50 item và 10 item/trang, ta cần 5 trang.
• Sử dụng vòng lặp duyệt qua từng số trang và tạo nút tương ứng

Lưu ý, code này chỉ tạo giao diện phân trang. Nếu muốn phân trang thật (hiển thị nội dung theo trang), cần thêm logic xử lý khi người dùng bấm vào số trang.

Có thể kết hợp Pagination với các component điều hướng khác không?

Bootstrap Pagination hoàn toàn có thể kết hợp với các component điều hướng khác như Breadcrumb, Tabs, Navs, hoặc Dropdown để tạo nên một hệ thống điều hướng toàn diện và mạch lạc trong giao diện người dùng.

• Pagination + Breadcrumb (sử dụng khi người dùng đang ở trang danh sách trong một nhánh cụ thể):
  • Breadcrumb dùng để hiển thị vị trí hiện tại trong hệ thống (ví dụ: Trang chủ > Blog > Bài viết)
  • Pagination dùng để chuyển trang giữa các bài viết
• Pagination + Tabs (giao diện blog, sản phẩm, dashboard dữ liệu):
  • Tabs dùng để chia nội dung theo loại (ví dụ: Mới nhất, Phổ biến, Được yêu thích)
  • Pagination dùng để phân trang dữ liệu trong mỗi tab
• Pagination + Dropdown (tăng trải nghiệm người dùng, đặc biệt với danh sách dài):
  • Dropdown chọn số item/trang (10, 20, 50), hoặc chuyển nhanh tới trang cụ thể

Đọc chi tiết về cách sử dụng Dropdown trong Bootstrap

Làm sao để tùy chỉnh kích thước của pagination trong Bootstrap?

Bootstrap cung cấp sẵn các class tiện ích để thay đổi kích thước của pagination nhanh chóng, mà không cần viết thêm CSS thủ công. Bao gồm 3 mức kích thước pagination:

Ví dụ về 3 kích cỡ của pagination Bootstrap:

     <nav aria-label="Pagination">
       <ul class="pagination pagination-sm">
		...
       </ul>
     </nav> 
     <nav aria-label="Pagination">
       <ul class="pagination">
		...
       </ul>
     </nav> 
     <nav aria-label="Pagination">
       <ul class="pagination pagination-lg">
		...
       </ul>
     </nav> 

Kết quả hiển thị:

Tổng kết

Pagination (phân trang) là một thành phần thiết yếu trong giao diện web hiện đại, đặc biệt khi làm việc với danh sách dữ liệu lớn như sản phẩm, bài viết, hay bảng kết quả. Với cấu trúc HTML rõ ràng, hệ thống class tiện ích mạnh mẽ và khả năng tùy chỉnh linh hoạt, Bootstrap Pagination giúp lập trình viên dễ dàng tạo ra giao diện phân trang đẹp mắt, thân thiện với người dùng và dễ bảo trì.

Qua bài viết này, ITviec hy vọng đã mang đến cho bạn đọc cái nhìn tổng quan và đầy đủ về cách sử dụng Pagination trong Bootstrap – từ cú pháp cơ bản đến các tuỳ chỉnh nâng cao như icon, kích thước, căn chỉnh, responsive và kết hợp với các thành phần điều hướng khác.