CSS Pagination Examples

CSS Pagination

Learn how to create a responsive pagination using CSS.

If you have a website with lots of pages, you may want to add some sort of pagination on each page.

Pagination is typically a series of links, wrapped in an unordered list (<ul>). Each link represents an individual page number. In addition there are "previous" and "next" controls:

• «
• 1
• 2
• 3
• 4
• 5
• »

Example Explained

Style the pagination container with:

• display: flex; to arrange the page numbers horizontally
• justify-content: center; to center align them
• list-style: none; to remove the list bullets

The style the <a> elements within the <li> elements for the look of the page numbers, with properties like display, padding, text-decoration, border, background-color, color, font-size, and border-radius.

Pagination With an Active Class

Highlight the currently active page with an .active class, to indicate which page the user is on:

• «
• 1
• 2
• 3
• 4
• 5
• »

Pagination With a Disabled Class

If the user are currently on the last page, the "Next" button should be disabled.

Here, we add a .disabled class, and sets the color , cursor and pointer-events properties, to make the "Next" button disabled:

• «
• 1
• 2
• 3
• 4
• 5
• »

Pagination Subpages

Continue learning about CSS pagination:

• Pagination Styles - hover effects, transitions, breadcrumbs