Pagination

What is pagination?

Pagination splits a long list of items, such as search results, blog posts, products or table rows, into separate pages and gives users controls to move between them. A typical pagination component shows previous and next buttons, numbered page links and sometimes first and last links, an ellipsis for skipped ranges or a page-size selector.

When to use pagination

Pagination works well when users need to find a specific item, return to a known position or share a link to a particular page. It also keeps server responses and DOM size small. For casual browsing feeds, infinite scroll or a "Load more" button may feel smoother, but they make it harder to reach the footer and to bookmark a position.

Pagination best practices

• Wrap the controls in <nav aria-label="Pagination"> and use a list for the page items.
• Mark the current page with aria-current="page" and give it a clear visual style.
• Use real links with unique URLs for each page (for example ?page=3) so pages can be crawled and shared.
• Give previous and next controls accessible labels, especially when they only show arrows.
• Disable or hide previous on the first page and next on the last page, and communicate the disabled state.
• On mobile, reduce the number of visible page numbers and keep tap targets large.
• Show the total or a "Showing 21 to 40 of 300" summary when it helps orientation.

Framework versions

Pagination examples are available for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap 5 versions use the pagination and page-item classes with size variants; the Bootstrap 6 alpha versions use theme-* colour roles to style the active page. Tailwind and pure CSS pagination covers numbered, compact, rounded and table-footer styles. Filter by framework, check the live preview, then copy the HTML and CSS from the code tabs or download the snippet and connect the links to your own paging logic.