This CSS tutorial provided various HTML and CSS source codes for creating a pagination bar.
Pagination
A website can have multiple pages, and moving from one page to another could be tricky if the user has to enter the URL for every page, but luckily webpages contain navigation bars and paginations. A navigation bar is put at the web page's header, which helps the user move from one page to another with a click. And pagination put at the
<footer>
of the web-page so the user can visit from one page to another with ease.
Let’s explore some examples of Creating responsive pagination.
Simple pagination
Generally, when we create pagination for our web-page we want that it should be inline, so for that, we use the
display:inline-block
.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.pagi {
display: inline-block;
}
.pagi a {
float: left;
/*pading <a> text*/
color: #000000;
padding: 10px 18px;
border: 1px solid black;
/*remove default <a> underline*/
text-decoration: none;
}
</style>
</head>
<body>
<h2>Pagination</h2>
<div class="pagi">
<a href="#">← Pre</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">→ Next</a>
</div>
</body>
</html>
Active Pagination
An active pagination will provide a specific styling to that page number on which the user currently is.
Example
Create a pagination and active the 3 rd page
<!DOCTYPE html>
<html>
<head>
<style>
.pagi {
display: inline-block;
}
.pagi a {
float: left;
/*pading <a> text*/
color: #000000;
padding: 10px 18px;
border: 1px solid black;
/*remove default <a> underline*/
text-decoration: none;
}
.pagi #active{
background-color: black;
color: white;
}
/*when user hover over the pagination numbers*/
.pagi a:hover{
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Pagination</h2>
<div class="pagi">
<a href="#">← Pre</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#" id='active'>3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">→ Next</a>
</div>
</body>
</html>
Bordered Pagination
Using the
border
property, we can set border for every page number. And using the
border-radius
property, we can round the corners of the border.
Example
Round the corner of the border.
Note:
This example round only the first and last link of the pagination using the
first-child
and
last-child
pseudo-class.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.pagi {
display: inline-block;
}
.pagi a {
float: left;
/*pading <a> text*/
color: #000000;
padding: 10px 18px;
border: 1px solid black;
/*remove default <a> underline*/
text-decoration: none;
}
/*when user hover over the pagination numbers*/
.pagi a:hover{
background-color: black;
color: white;
}
.pagi a:first-child{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.pagi a:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<h2>Pagination</h2>
<div class="pagi">
<a href="#">← Pre</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">→ Next</a>
</div>
</body>
</html>
Space between the page links
To provide space between the pagination links, use the margin property.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.pagi {
display: inline-block;
}
.pagi a {
float: left;
/*pading <a> text*/
color: #000000;
padding: 10px 18px;
border: 1px solid black;
/*remove default <a> underline*/
text-decoration: none;
/*set space between links*/
margin:3px;
}
/*when user hover over the pagination numbers*/
.pagi a:hover{
background-color: black;
color: white;
}
.pagi a:first-child{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.pagi a:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<h2>Pagination</h2>
<div class="pagi">
<a href="#">← Pre</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">→ Next</a>
</div>
</body>
</html>
Size of the page link box
The size of the pagination box can be increased using the
font-size
property. It will increase the size of the text font and, ultimately, the page link box's size.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.pagi {
display: inline-block;
}
.pagi a {
float: left;
/*pading <a> text*/
color: #000000;
padding: 10px 18px;
border: 1px solid black;
/*remove default <a> underline*/
text-decoration: none;
font-size: 20px
}
/*when user hover over the pagination numbers*/
.pagi a:hover{
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Pagination</h2>
<div class="pagi">
<a href="#">← Pre</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">Next → </a>
</div>
</body>
</html>
Center the pagination box
To set the pagination box at the center, wrap the box within a <div> element and set the
text-align:center.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/*align the pagianiton at the center*/
.center{
text-align: center;
}
.pagi {
display: inline-block;
}
.pagi a {
float: left;
/*pading <a> text*/
color: #000000;
padding: 10px 18px;
border: 1px solid black;
/*remove default <a> underline*/
text-decoration: none;
font-size: 20px
}
/*when user hover over the pagination numbers*/
.pagi a:hover{
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Pagination</h2>
<div class="center">
<div class="pagi">
<a href="#">← Pre</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">Next → </a>
</div>
</div>
</body>
</html>
Summary
- Pagination resides at the bottom side of the web page and helps users move from one page to another.
- Use the display:inline-block to inline all the page links.
- To center a pagination box wrap around it a <div> element and use the text-align:center
- For an active page, define a different styling for the page link.