---
title: CSS Pagination
description: "> Learn how to create a responsive pagination using CSS. ## Simple Pagination If you have a website with lots of pages, you may wish to add some sort of pagination to each page: - « - 1 - 2…"
url: "https://apprentice.mn/docs/css-pagination/"
updated: "2021-05-12"
category: CSS
---

# CSS Pagination

> Learn how to create a responsive pagination using CSS.

## Simple Pagination

If you have a website with lots of pages, you may wish to add some sort of pagination to each page:

- «
- 1
- 2
- 3
- 4
- 5
- 6
- »

- ❮  
-   ❯

       `.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}`

## Active and Hoverable Pagination

       [«](#) [1](#) [2](#) [3](#) [4](#) [5](#) [6](#) [»](#)

Highlight the current page with an `.active` class, and use the `:hover` selector to change the color of each page link when moving the mouse over them:

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

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

### Rounded Active and Hoverable Buttons

       [«](#) [1](#) [2](#) [3](#) [4](#) [5](#) [6](#) [»](#)

Add the `border-radius` property if you want a rounded “active” and “hover” button:

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

.pagination a.active {
  border-radius: 5px;
}`

### Hoverable Transition Effect

       [«](#) [1](#) [2](#) [3](#) [4](#) [5](#) [6](#) [»](#)

Add the `transition` property to the page links to create a transition effect on hover:

     `.pagination a {
  transition: background-color .3s;
}`

## Bordered Pagination

       [«](#) [1](#) [2](#) [3](#) [4](#) [5](#) [6](#) [»](#)

Use the `border` property to add borders to the pagination:

     `.pagination a {
  border: 1px solid #ddd; /* Gray */
}`

### Rounded Borders

**Tip:** Add rounded borders to your first and last link in the pagination:

       [«](#) [1](#) [2](#) [3](#) [4](#) [5](#) [6](#) [»](#)      `.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

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

### Space Between Links

**Tip:** Add the `margin` property if you do not want to group the page links:

       [«](#) [1](#) [2](#) [3](#) [4](#) [5](#) [6](#) [»](#)      `.pagination a {
  margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}`

## Pagination Size

       [«](#) [1](#) [2](#) [3](#) [4](#) [5](#) [6](#) [»](#)

Change the size of the pagination with the `font-size` property:

     `.pagination a {
  font-size: 22px;
}`

## Centered Pagination

        [«](#) [1](#) [2](#) [3](#) [4](#) [5](#) [6](#) [»](#)

To center the pagination, wrap a container element (like <div>) around it with `text-align:center`

     `.center {
  text-align: center;
}`

## More Examples

###  

### Example

        [❮](#) [❯](#)   [Home](#) [Link 1](#) [Link 2](#) [Link 3](#)

## Breadcrumbs

- [Home](#)
- [Pictures](#)
- [Summer 15](#)
- Italy

Another variation of pagination is so-called “breadcrumbs”:

     `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: "/ 0a0";
}`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-pagination%2F&linkname=CSS%20Pagination](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-pagination%2F&linkname=CSS%20Pagination)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-pagination%2F&linkname=CSS%20Pagination](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-pagination%2F&linkname=CSS%20Pagination)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-pagination%2F&linkname=CSS%20Pagination](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-pagination%2F&linkname=CSS%20Pagination)[https://www.addtoany.com/share](https://www.addtoany.com/share)