How to make Pagination with CSS?

Asked 15-Jul-2021
Viewed 258 times


How to make pagination with the help of CSS. State with the help of an example.

1 Answer


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=''>
    <meta charset='utf-8' />
    <title>Mindstick Software Private Limited</title>
        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;
    <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>
Hope this will clear your confusion.
Happy Coding!