Logo
×

CSS Pagination

CSS Pagination

The pagination in CSS is an advantageous approach for indexing of a website’s distinct pages over the homepage. When our site contains multiple pages, we must insert a few pagination sorts to every page.

Some of the essential types of pagination are discussed as below:

Basic Pagination

It is simple pagination. We must apply the pagination class to the <ul> element for attaining this pagination.

Consider the below example:

Example:

<!DOCTYPE html> 
<html> 
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<style> 
ul.pagination
{ 
display: inline-block; 
padding: 0; 
margin: 0; 
} 
ul.pagination li {display: inline;} 
ul.pagination li a
{ 
color: black; 
float: left; 
padding: 8px 16px; 
text-decoration: none; 
} 
</style> 
</head> 
<body> 
<h2>Basic Pagination</h2> 
<ul class="pagination"> 
<li><a href="#">1</a></li> 
<li><a class="active" href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">6</a></li> 
<li><a href="#">7</a></li> 
</ul> 
</body> 
</html> 

Output:

CSS Pagination

Basic Pagination and Arrow

It is applied if we have multiple pages. It provides the facility to utilize the arrow for the next and previous pages.

Consider the below example:

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul.pagination
{ 
display: inline-block; 
padding: 0; 
margin: 0; 
} 
ul.pagination li {display: inline;} 
ul.pagination li a
{ 
color: black; 
float: left; 
padding: 8px 16px; 
text-decoration: none; 
} 
</style> 
</head> 
<body> 
<h2>Basic Pagination along with Arrow</h2> 
<ul class="pagination"> 
<li><a href="#">?</a></li> 
<li><a href="#">1</a></li> 
<li><a class="active" href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">6</a></li> 
<li><a href="#">7</a></li> 
<li><a href="#">?</a></li> 
</ul> 
</body> 
</html> 

Output:

CSS Pagination

Hoverable Pagination and Current/Active link

It is applied if we wish to highlight or change any current page of all the page-link when we point the cursor over them.

Consider the below example:

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul.pagination
{ 
display: inline-block; 
padding: 0; 
margin: 0; 
} 
ul.pagination li {display: inline;} 
ul.pagination li a
{ 
color: black; 
float: left; 
padding: 8px 16px; 
text-decoration: none; 
} 
ul.pagination li a.active
{ 
background-color: navy; 
color: white; 
} 
ul.pagination li a:hover:not(.active) {background-color: lightblue;} 
</style> 
</head> 
<body> 
<h2> Hoverable and Active Pagination </h2> 
<p> Point the cursor on the numbers.</p> 
<ul class="pagination"> 
<li><a href="#">?</a></li> 
<li><a href="#">1</a></li> 
<li><a class="active" href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">6</a></li> 
<li><a href="#">7</a></li> 
<li><a href="#">?</a></li> 
</ul> 
</body> 
</html> 

Output:

CSS Pagination

Hoverable and Rounded Active Pagination
This pagination allows us to apply the property border-radius to get rounded “hover” and “next” button.

Consider the below example:

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul.pagination
{ 
display: inline-block; 
padding: 0; 
margin: 0; 
} 
ul.pagination li {display: inline;} 
ul.pagination li a
{ 
color: black; 
float: left; 
padding: 8px 16px; 
text-decoration: none; 
border-radius: 5px; 
} 
ul.pagination li a.active
{ 
background-color: navy; 
color: white; 
border-radius: 5px; 
} 
ul.pagination li a:hover:not(.active) {background-color: lightblue;} 
</style> 
</head> 
<body> 
<h2> Hover and  Rounded Active Buttons </h2> 
<ul class="pagination"> 
<li><a href="#">?</a></li> 
<li><a href="#">1</a></li> 
<li><a class="active" href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">6</a></li> 
<li><a href="#">7</a></li> 
<li><a href="#">?</a></li> 
</ul> 
</body> 
</html> 

Output:

CSS Pagination

Bordered Pagination

We apply the CSS border attribute to include the borders to this pagination.

Consider the below example:

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul.pagination
{ 
display: inline-block; 
padding: 0; 
margin: 0; 
} 
ul.pagination li {display: inline;} 
ul.pagination li a
{ 
color: black; 
float: left; 
padding: 8px 16px; 
text-decoration: none; 
border: 1px solid black; 
} 
ul.pagination li a.active
{ 
background-color: navy; 
color: white; 
border: 1px solid grey; 
} 
ul.pagination li a:hover:not(.active) {background-color: lightblue;} 
</style> 
</head> 
<body> 
<h2> Bordered Pagination </h2> 
<ul class="pagination"> 
<li><a href="#">?</a></li> 
<li><a href="#">1</a></li> 
<li><a class="active" href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">6</a></li> 
<li><a href="#">7</a></li> 
<li><a href="#">?</a></li> 
</ul> 
</body> 
</html> 

Output:

CSS Pagination

Bordered Rounded Pagination

This technique allows us to apply the rounded borders to the last and first link of the pagination.

Consider the below example:

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul.pagination
{ 
display: inline-block; 
padding: 0; 
margin: 0; 
} 
ul.pagination li {display: inline;} 
ul.pagination li a
{ 
color: black; 
float: left; 
padding: 8px 16px; 
text-decoration: none; 
border: 1px solid black; 
} 
.pagination li:first-child a
{ 
border-top-left-radius: 5px; 
border-bottom-left-radius: 5px; 
} 
.pagination li:last-child a
{ 
border-top-right-radius: 5px; 
border-bottom-right-radius: 5px; 
} 
ul.pagination li a.active
{ 
background-color: navy; 
color: white; 
border: 1px solid grey; 
} 
ul.pagination li a:hover:not(.active) {background-color: lightblue;} 
</style> 
</head> 
<body> 
<h2> Bordered Rounded Pagination </h2> 
<ul class="pagination"> 
<li><a href="#">?</a></li> 
<li><a href="#">1</a></li> 
<li><a class="active" href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">6</a></li> 
<li><a href="#">7</a></li> 
<li><a href="#">?</a></li> 
</ul> 
</body> 
</html> 

Output:

CSS Pagination

Space among Pagination

The margin attribute is applied to get a space among the links inside the pagination.

Consider the below example:

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul.pagination
{ 
display: inline-block; 
padding: 0; 
margin: 0; 
} 
ul.pagination li {display: inline;} 
ul.pagination li a
{ 
color: black; 
float: left; 
padding: 8px 16px; 
text-decoration: none; 
border: 1px solid black; 
margin: 0 4px;  
} 
ul.pagination li a.active
{ 
background-color: navy; 
color: white; 
border: 1px solid grey; 
} 
ul.pagination li a:hover:not(.active) {background-color: lightblue;} 
</style> 
</head> 
<body> 
<h2> Space among Pagination </h2> 
<ul class="pagination"> 
<li><a href="#">?</a></li> 
<li><a href="#">1</a></li> 
<li><a class="active" href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">6</a></li> 
<li><a href="#">7</a></li> 
<li><a href="#">?</a></li> 
</ul> 
</body> 
</html> 

Output:

CSS Pagination

Size of Pagination

We can modify the pagination size with the use of the CSS property font-size.

Consider the below example:

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul.pagination
{ 
display: inline-block; 
padding: 0; 
margin: 0; 
} 
ul.pagination li {display: inline;} 
ul.pagination li a
{ 
color: black; 
float: left; 
padding: 8px 16px; 
text-decoration: none; 
border: 1px solid black; 
font-size: 22px; 
} 
ul.pagination li a.active
{ 
background-color: navy; 
color: white; 
border: 1px solid grey; 
} 
ul.pagination li a:hover:not(.active) {background-color: lightblue;} 
</style> 
</head> 
<body> 
<h2>Pagination Size</h2> 
<p>Change the property font-size to style the pagination larger or smaller.</p> 
<ul class="pagination"> 
<li><a href="#">?</a></li> 
<li><a href="#">1</a></li> 
<li><a class="active" href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">6</a></li> 
<li><a href="#">7</a></li> 
<li><a href="#">?</a></li> 
</ul> 
</body> 
</html> 

Output:

CSS Pagination

Centered Pagination

We must wrap any container element over it and apply text-align: center property to set the pagination in the center of a page.

Consider the below example:

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul.pagination
{ 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 
ul.pagination li {display: inline;} 
ul.pagination li a
{ 
    color: black; 
    float: left; 
    padding: 8px 16px; 
    text-decoration: none; 
    border: 1px solid #ddd; 
} 
ul.pagination li a.active
{ 
    background-color: navy; 
    color: white; 
    border: 1px solid grey; 
} 
ul.pagination li a:hover:not(.active) {background-color: lightblue;} 
div.center {text-align: center;} 
</style> 
</head> 
<body> 
<h2> Centered Pagination </h2> 
<div class="center"> 
<ul class="pagination"> 
    <li><a href="#">?</a></li> 
    <li><a href="#">1</a></li> 
    <li><a class="active" href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
    <li><a href="#">5</a></li> 
    <li><a href="#">6</a></li> 
    <li><a href="#">7</a></li> 
    <li><a href="#">?</a></li> 
  </ul> 
</div> 
</body> 
</html> 

Output:

CSS Pagination

Navigation and Next/Previous Pagination

We can include the pagination for the next/previous button and for navigation also.

Consider the below example:

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul.pagination
{ 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 
ul.pagination li {display: inline;} 
ul.pagination li a
{ 
    color: black; 
    float: left; 
    padding: 8px 16px; 
    text-decoration: none; 
    border: 1px solid black; 
    font-size: 18px; 
} 
ul.pagination li a.active
{ 
    background-color: blue; 
    color: black; 
    border: 1px solid black; 
} 
ul.pagination li a:hover:not(.active) {background-color: lightblue;} 
</style> 
</head> 
<body> 
<p><strong>Previous/Next buttons:</strong></p> 
<ul class="pagination"> 
  <li><a href="#">?</a></li> 
  <li><a href="#">?</a></li> 
</ul> 
<p><strong>Navigation pagination:</strong></p> 
<ul class="pagination"> 
  <li><a href="#" class="active">Home</a></li> 
  <li><a href="#">Link 1</a></li> 
  <li><a href="#">Link 2</a></li> 
  <li><a href="#">Link 3</a></li> 
</ul> 
</body> 
</html> 

Output:

CSS Pagination

Breadcrumb Pagination

A unique kind of pagination is known as breadcrumb pagination.

Consider the below example:

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
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: "/\00a0"; 
} 
ul.breadcrumb li a {color: green;} 
</style> 
</head> 
<body> 
<h2> Tutorial and Example </h2> 
<ul class="breadcrumb"> 
  <li><a href="#">Java</a></li> 
  <li><a href="#">Oracle</a></li> 
  <li><a href="#">PHP</a></li> 
  <li>AngularJS</li> 
</ul> 
<p><strong>Note:</strong> It is an illustration of Breadcrumb Pagination.</p> 
</body> 
</html> 

Output:

CSS Pagination

Related Topics

CSS Links

CSS Link is used to create styled link. There are various ways to implement it. Styling Links Link can be styled with CSS properties like color, font-family, background etc. Example: <!DOCTYPE html>   <html>   <head>   <style>   a {       color: red;   }   </style>   </head>   <body>   <p><b><a href="https://www.tutorialandexample.com"    target="_blank">This is a link</a></b></p>   </body>   </html> Try Now There are four...

2 minutes read.

CSS Font

CSS Font: CSS has font property, which makes the text more attractive. We can alter the entire look by changing font color, font size, font style, and much more. In...

5 minutes read.

CSS Float

CSS Float: The float property of CSS is the positioning property. This property is applied to elements to push them either to left or right. It permits for wrapping facility...

4 minutes read.

CSS Page-break-before Attribute

Page-break-before Attribute As its name implies, the page-break-before property is applied to include page break before any element, at the time of printing any document. It adds the page break before...

5 minutes read.

Grid Vs Flexbox in CSS

Grid: - CSS Grid Layout is a 2D grid-based matrix-based layout method with columns and rows that simplifies web pages created by eliminating the need for floats and placement. A grid layout, like...

4 minutes read.

CSS Navigation bar

CSS Navigation bar: A navigation system or navigation bar comes upon GUI that can help many visitors to access the information. A Navigation bar is a UI component on the...

11 minutes read.

Difference between HTML and CSS

HTML HTML stands for HyperText Markup Language and is used to create web pages and websites and web applications, which means we can create static web pages. Html is a scripting...

3 minutes read.

CSS Inline

What is CSS? CSS is an acronym for Cascading Style Sheets. CSS is the language that we use to style an HTML document. It specifies how HTML components should appear. CSS...

4 minutes read.

CSS :root selector

CSS :root selector This CSS pseudo-class matches any document’s root element. It chooses the parent of the highest-level inside the document DOM or tree. An element of <html> is always a...

2 minutes read.

CSS Overlay

CSS Overlay: It measures to cover-up something’s surface along with a coating. CSS overlay sets anything over the top area of other things. It creates a web-page more attractive. The...

8 minutes read.

What is CSS used for

What is CSS used for? CSS stands for Cascading Style Sheet. CSS is a stylesheet language for web pages. It specifies how a document created in a markup language looks and...

4 minutes read.

Css Text Orientation

Introduction: The text-orientation property of CSS is used to specify the orientation of the text characters in the line of content. This property applies only with the vertical writing-mode and not...

4 minutes read.

Hover condition for a:before and a:after in CSS

In CSS, :after and :before are used to add content after and before the element. The CSS pseudo-class is used to add some styling effect to the webpage. We can change...

4 minutes read.

How to center a button in CSS

How to center a button in CSS? In the tutorial, we will learn how to center a button in CSS. CSS (Cascading Style Sheets) gives an HTML web page the greatest possible...

4 minutes read.

CSS Visibility

Visibility in CSS: This visibility property in CSS is employed to describe whether the components are visible or not. Note: An invisible component also grabs the space over the page. If...

2 minutes read.

CSS Text-align

Text-align The text-align property of CSS sets the table-cell box’s horizontal alignment or any block element. The text-align property is the same as the CSS property vertical-align but towards any horizontal...

1 minute read.

CSS Justify Content

Justify Content: These properties are applied for the alignment of items of a flexible box container if any item does not cover every available space over the main-axis, i.e., horizontally....

4 minutes read.

CSS Dropdowns

Dropdowns are one of the maximum crucial parts of an interactive internet site. CSS is a kind used to design the drop-down menus. A drop-down essentially is a group of...

5 minutes read.

CSS Functions

CSS functions are used for different CSS properties. Every front-end developer should have knowledge of all CSS functions. It makes the coding easier. FunctionsExplanationattr().It returns the value of an attribute of...

5 minutes read.

Create a 3D text effect using HTML and CSS

A3D text effect is a beautiful and attractive part of a webpage. As a web page developer, it is crucial to know how to create a 3D text effect with...

3 minutes read.