#BLOG - 

CSS Pagination - How To Create Responsive Pagination Design

Are you looking for a responsive pagination using HTML and CSS? In this blog, I have shared a simple CSS pagination that supports responsive design. If you search on Google for responsive pagination design, then you will get pagination with JavaScript, server-side logic or both. You will get different types of pagination tutorials at the bottom of this article but in my opinion, you have to learn first how to create responsive pagination using HTML and CSS. After that, you can easily implement it with JavaScript or server-side logic. I have divided this tutorial into small parts. So let's get started.

2019
Last Modified on 2018-05-27
Ratings:   5.00 from 2 Reviews

CSS Pagination - How To Create Responsive Pagination Design image

Newsletter Subscribtion

Subscribe to our newsletter so that you can receive all updates.


Dreamy Priyanka

How Does It Work?


As I told you that this is a responsive design so this pagination automatically adjusts in any device. I have set pagination links at the center of the screen; you can adjust it to left or right position as you want. I have also created an active link effect. Using it users can easily understand which link they are right now. This is how it looks like on mobile and desktop screen.


Mobile and Desktop view of CSS pagination

How to create responsive pagination using HTML and CSS


1. Here is the HTML part    


<!DOCTYPE html>
<html>
<title>CSS Responsive Pagination</title>
<body>

<div class="pagination">
<ul>

<li>
<a href="#" >&laquo;</a>
</li>

<li>
<a href="#" >1</a>
</li>
<li>
<a href="#" >2</a>
</li>
<li>
<a href="#" class="active">3</a>
</li>
<li>
<a href="#" >4</a>
</li>
<li>
<a href="#" >5</a>
</li>
<li>
<a href="#" >&raquo;</a>
</li>

</ul>
</div>

</body>
</html>

As you can see I have created a div with "pagination" class. This is the main outer part of our responsive pagination links. Inside this main div, I have created an unordered list and inside the li tag, I have used the anchor tag. That’s it and here is the basic design looks like.


CSS Pagination without style


2. Now it’s time to design pagination links and make it responsive. First, we have to center all the elements inside our main pagination div.


.pagination {
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}

3. Now we are going to design our ul and li tags. Here is the code I have to used -


.pagination ul {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: 0 0;
}
.pagination li {
display: inline;
margin: 0;
padding: 0;
}

4. To design links I have used the white background color with black text color and black border. When you hover any link you will get the green background color to highlight the link.


.pagination li a {
border: 1px solid #c9c9c9;
color: #242424;
text-decoration: none;
display: inline-block;
transition: all .8s ease 0s;
height: 40px;
line-height: 40px;
margin: 0 10px 0 0;
padding: 0;
text-align: center;
width: 40px;
margin-top: 10px;
}
.pagination li a:hover {
background-color: #4CAF50;
color: white;
}

I have used the green background to highlight the active page or link and name it as active class.


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

Here is the full CSS code I have used –


.pagination {
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
.pagination ul {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: 0 0;
}
.pagination li {
display: inline;
margin: 0;
padding: 0;
}
.pagination li a {
border: 1px solid #c9c9c9;
color: #242424;
text-decoration: none;
display: inline-block;
transition: all .8s ease 0s;
height: 40px;
line-height: 40px;
margin: 0 10px 0 0;
padding: 0;
text-align: center;
width: 40px;
margin-top: 10px;
}
.pagination li a:hover {
background-color: #4CAF50;
color: white;
}
.pagination li a.active {
background-color: #4CAF50;
color: white;
}

How to use


To create pagination links just put an anchor tag inside the li tag as shown in the above. To highlight the activate link just use "active" class.


My words


You can easily use this code in any pagination. I am using this code for last 5 years and that’s why I am sharing with you. If you need any help or more information you can easily contact me. I will definitely help you. To get faster response (within 1 hour) please send message on our official FB Page.









I have created a video on this topic - Watch Now






Share Now With Your Friends & Family:




Please Leave a ReplyCancel Reply


Name
Email
Website
Comment
Ratings
   

  • Ratings: 5/5

    I love this tutorial. Can you please post another tutorial of Responsive CSS design with Bootstrap?
    reply
  • Ratings: 5/5

    This css pagination is really awesome. The way you described the process i loved that. Can you make a php pagination tutorial? I am looking for a simple responsive php pagination tutorial.
    reply


Follow Us
About Me
author souradeep debnath

Hi, I am Souradeep Debnath and I am really happy that you are here. Here I share tutorial topics on technology.





Live Chat


souradeep debnath live facebook