HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

Simple Pagination

If your website has many pages, you may want to consider adding pagination to each page:

Example

<!DOCTYPE html>
<html>
<head>
<title>Pagination Example</title>
<style>
.pg {
  display: inline-block;
}

.pg a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>
</head>
<body>
<div class="pg">
  <a href="#">«
 <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="#">»</a>
</div>
</body>
</html>
You can click on above box to edit the code and run again.

Output

« 1 2 3 4 5 6 »

Active and Hoverable Pagination

Apply the .active class to highlight the current page and utilize the :hover selector to alter the color of each page link when hovering over them.

Example

<!DOCTYPE html>
<html>
<head>
<title>Pagination Example</title>
</head>
<body>

 

    <a href="#" class="page-link">«</a>
    <a href="#" class="page-link">1</a>
    <a href="#" class="page-link">2</a>
    <a href="#" class="page-link">3</a>
    <a href="#" class="page-link">4</a>
    <a href="#" class="page-link">5</a>
    <a href="#" class="page-link">»</a>
    <div class="pagination-info">
      Page 1 of 5
    </div>
  </div>
</body>
</html>
You can click on above box to edit the code and run again.

Output


Rounded Active and Hoverable Buttons

Add the border-radius property for rounded "active" and "hover" buttons:

Example

<!DOCTYPE html>
<html>
<head>
<title>Pagination Example</title>
</head>
<body>
You can click on above box to edit the code and run again.

Output

Rounded Active and Hover Buttons

Hoverable Transition Effect

Add the transition property to the page links to create a hover effect transition.

Example

<!DOCTYPE html>
<html>
<head>
<title>Pagination Example</title>
</head>
<body>
You can click on above box to edit the code and run again.

Output

Transition Effect on Hover

Move the mouse over the numbers.

Bordered Pagination

Use the border property to add borders to the pagination:

Example

<!DOCTYPE html>
<html>
<head>
<title>Pagination Example</title>
</head>
<body>
You can click on above box to edit the code and run again.

Output

Pagination with Borders

Pagination Size

Change the size of the pagination with the font-size property:

Example

<!DOCTYPE html>
<html>
<head>
<title>Pagination Example</title>
</head>
<body>
You can click on above box to edit the code and run again.

Output

Pagination Size

Change the font-size property to make the pagination smaller or bigger.


Space Between Links

To add space between the pagination links, you can use margins or padding.

Example

<!DOCTYPE html>
<html>
<head>
<title>Pagination Example</title>


</head>
<body>

<div class="pagination">
  <a href="#">«</a>
  <a href="#">1
  <a href="#" class="active">2</a>
  <a href="#">3</a>
 <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
 <a href="#">»</a>
</div>
</body>
</html>
You can click on above box to edit the code and run again.

Output

Pagination with Margins