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

How to use google fonts in CSS

Fonts: - Fonts are used to make our website look more beautiful. Choosing appropriate font according to the web design or layout is also important. Many typefaces are accessible in...

4 minutes read.

CSS Specificity

CSS Specificity: If one or more conflicting rules of CSS express a similar element, a browser will pursue a few rules to examine the specific one. Specificity can be specified...

3 minutes read.

CSS Background-blend-mode

Background-blend-mode The background-blend-mode property sets a blend mode of the component’s every background layer (color/image). It illustrates how the element background image blends well with the element background color. We can...

9 minutes read.

CSS Variables

CSS Variables These variables of CSS are applied to add the custom property values to our various web-pages. The custom properties are often called as CSS variables or cascading variables. Various...

4 minutes read.

CSS Ellipsis

The CSS ellipsis kind of is the value that mostly is used by the property: text-overflow. Here, we will discuss the following: What is CSS Ellipsis? Syntax for CSS ellipsis How to...

3 minutes read.

CSS Form

You can create attractive HTML form by using CSS. Style input Fields The Input Field width properties are used to determine the width of the input field. Let us see an example of CSS style...

2 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 Text-decoration

CSS Text-decoration: It is an essential property of CSS that is used to decorate the content of the text. It can add-on the lines above, under, and over the text....

3 minutes read.

CSS Order

CSS Order CSS order property in CSS describes the flex item’s order inside the flex or any grid container. It is applied to order any flex item. Note: If any component is...

3 minutes read.

CSS Color Keywords

Here, we will discuss the following keywords: transparent currentcolor Inherit Transparent keyword A color can generally be made transparent by using the transparent keyword. Often it is used to for all intents...

4 minutes read.

CSS Text-Overflow

Introduction: The text-overflow property of CSS is used to format the text which is overflowing the boundaries of the container. This property helps user to clip the text, to display the...

5 minutes read.

CSS Filter

CSS Filter CSS filter is used to apply visual effects on the images, text, and other factors of the webpage. This filter property in CSS allows us to admit the effects like...

7 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 Word Wrap

Word Wrap in CSS: The word-wrap property in CSS is referred to break any lengthy word and wrap towards the next or following line. It is employed for preventing overflow...

1 minute read.

CSS Descendant Selector

Descendant Selector The Descendant selector in CSS is used to match the descendant components of a particular component. The term descendant depicts nested in whatever place, inside a DOM tree. This...

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.

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 Checkbox style

CSS Checkbox style: It is an element of HTML, which is used to get input from various users. It is difficult to style any checkbox. However, some elements make it...

6 minutes read.

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...

13 minutes read.

Untitled Reusable Block

  ...

1 minute read.