WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Pagination Examples


In this chapter, we will show you how to create a paging instance by using CSS.


Simple pagination

If your website has many pages, you need to use pagination to navigate through each page.

The following example demonstrates how to use HTML and CSS to create pagination:

To make a pagination, style a HTML list:

Example

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
Try it Yourself »

Active and Hoverable Pagination

If you click on the current page, you can use .active to set the current page style, and you can use the: hover selector to hover over the style:

Example

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
Try it Yourself »
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

Rounded Active and Hoverable Buttons

You can use the border-radius attribute to add a rounded corner style to the selected page number:

Example

ul.pagination li a {
    border-radius: 5px;
}

ul.pagination li a.active {
    border-radius: 5px;
}
Try it Yourself »

Hoverable Transition Effect

We can add a transition effect when the mouse moves over the page number by adding the transition attribute:

Example

ul.pagination li a {
    transition: background-color .3s;
}
Try it Yourself »

Bordered Pagination

We can use the border property to add bordered pagination:

Example

ul.pagination li a {
    border: 1px solid #ddd; /* Gray */
}
Try it Yourself »

Rounded Borders

Tip: Add rounded corners to the first and last pagination links:

Example

.pagination li:first-child a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

Try it Yourself »

Paging interval

Tip: You can use the margin attribute to add spaces directly to each page number:

Example

Tip: You can use the margin attribute to add spaces directly to each page number:
Try it Yourself »

Pagination Size

We can use the font-size attribute to set the font size of the pagination:

Example

ul.pagination li a {
    font-size: 22px;
}
Try it Yourself »

Centered Pagination

If you want to center the pagination, you can add a text-align: center style on the container element (such as <div>):

Example

div.center {
    text-align: center;
}
Try it Yourself »

More Examples


Breadcrumbs

Another type of navigation is breadcrumb navigation. Examples are as follows:

Example

ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
Try it Yourself »