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:
Example
A simple pagination:
.pagination {
display: flex;
justify-content: center;
list-style: none; /* remove list bullets */
padding: 0px;
}
.pagination li a
{
display: block; /* let links fill the list item */
padding: 8px 12px;
text-decoration: none;
border: 1px
solid gray;
color: black;
margin: 0 4px;
border-radius: 5px; /* add
rounded borders */
}
Try it Yourself »
Example Explained
Style the pagination container with:
display: flex;to arrange the page numbers horizontallyjustify-content: center;to center align themlist-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:
Example
Pagination with an .active class:
.pagination li a.active {
background-color: #4CAF50;
color: white;
}
Try it Yourself »
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:
Example
Pagination with a .disabled class:
.pagination li a.disabled {
color: #dddddd;
cursor:
not-allowed;
pointer-events: none;
}
Try it Yourself »
Pagination Subpages
Continue learning about CSS pagination:
- Pagination Styles - hover effects, transitions, breadcrumbs
