Javatpoint Logo
Javatpoint Logo

CSS Pagination

CSS pagination is a very useful technique for indexing different pages of a website on the homepage. If your website has lots of pages, you have to add some sort of pagination to each page.

Following are the different types of pagination:


Basic Pagination

This is the simplest pagination. You have to use pagination class to an <ul> element to attain this pagination.

See this example:

Test it Now

Basic Pagination with arrow

This pagination is used when you have lots of pages. It facilitates you to use arrow for previous and next page.

See this example:

Test it Now

Active/Current link and Hoverable Pagination

This pagination is used when you want to highlight the current page and change the color of each page-link when you move the mouse over them. You have to use .active class, and the :hover selector for this effect.

See this example:

Test it Now

Rounded Active and Hoverable Pagination

In this pagination, you use border-radius property to get the rounded "active" and "hover" button.

See this example:

Test it Now

Bordered Pagination

In this pagination, you use border property to add borders to the pagination.

See this example:

Test it Now

Rounded Border Pagination

This pagination method is used to add rounded borders to your first and last link of pagination.

See this example:

Test it Now

Space Between Pagination

The margin property is used to get the space between the links in the pagination.

See this example:

Test it Now

Pagination Size

You can change the size of the pagination by using font-size property.

See this example:

Test it Now

Centered Pagination

You have to wrap a container element around it (like

) and use text-align:center to put the pagination to the center of the page.

See this example:

Test it Now

Previous/Next and Navigation Pagination

You can add pagination for previous/next button and also for navigation.

See this example:

Test it Now

Breadcrumb Pagination

A special type of pagination is called breadcrumb pagination.

See this example:

Test it Now
Next Topic#




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA