---
title: "How to make Pagination  with CSS?"  
description: "How to make Pagination  with CSS?"  
author: "Ethan Karla"  
published: 2021-07-15  
canonical: https://answers.mindstick.com/qa/93712/how-to-make-pagination-with-css  
category: "programming"  
tags: ["css cascading style sheets", "css"]  
reading_time: 2 minutes  

---

# How to make Pagination  with CSS?

How to make [pagination](https://www.mindstick.com/blog/265/pagination-in-php) with the help of CSS. State with the help of an example.

## Answers

### Answer by Shivam Prajapati

Pagination is a useful technique for showing multiple blocks in a separate page. These are mostly used in a website where a number of products and services are displayed. Let's switch to the example for better understanding :

```
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title>Mindstick Software Private Limited</title>
    <style>
        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }
            ul.pagination li {
                display: inline;
            }
                ul.pagination li a {
                    margin: 4px;
                    color: black;
                    float: left;
                    padding: 8px 16px;
                    text-decoration: none;
                    border: 1px solid black;
                }
                    ul.pagination li a:hover {
                        box-shadow: 3px 2px 5px 1px grey;
                    }
    </style>
</head>
<body>
    <h2>Basic Pagination</h2>
    <ul class='pagination'>
        <li><a href='javascript:void(0)'>1</a></li>
        <li><a class='active' href='javascript:void(0)'>2</a></li>
        <li><a href='javascript:void(0)'>3</a></li>
        <li><a href='javascript:void(0)'>4</a></li>
        <li><a href='javascript:void(0)'>5</a></li>
        <li><a href='javascript:void(0)'>6</a></li>
        <li><a href='javascript:void(0)'>7</a></li>
    </ul>
</body>
</html>
```

Hope this will clear your confusion.\
Happy Coding!


---

Original Source: https://answers.mindstick.com/qa/93712/how-to-make-pagination-with-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
