In this article, we will learn how to align pagination on the website using the Bootstrap classes. The Pagination is a very useful component present in the Bootstrap. Pagination is used to enable navigation between pages in a website as it divides the document into different pages and provides them with numbers. This will create a large block of connected links which help to easily navigate to different pages. Thus, helps to enhance the user experience.
Steps for creating Bootstrap Pagination:
Step 1: Import the CDN bootstrap links for CSS and JavaScript from the official website of Bootstrap.
<!– Bootstrap CSS –>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css” integrity=”sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn” crossorigin=”anonymous”/>
<!– Bootstrap JS –>
<script src=”https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js” integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js” integrity=”sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF” crossorigin=”anonymous”></script>
Step 2: Now make <ul> tag with the class name “pagination” inside the <body> tag.
<ul class="pagination"> </ul>
Step 3: Add all the page numbers inside the <ul> tag by using the <li> tags with the class name “page-item”.
<ul>
<li class="page-item"></li>
<li class="page-item"></li>
<li class="page-item"></li>
</ul>
Step 4: Inside each <li> tag, add the page no. using the <a> tag and giving the “href” attribute to each page.
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
</ul>At this stage, we have created a basic pagination structure using Bootstrap.
We will understand the concept of pagination & the various available Bootstrap classes through the example.
Example: This example illustrates the Bootstrap Pagination using the justify-content-evenly & page-item classes.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous">
<title>Pagination</title>
</head>
<body>
<h1>Home Page</h1>
<ul class="pagination justify-content-evenly">
<li class="page-item">
<a class="page-link" href="#">Home</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
</ul>
</body>
</html>
|
Output: From the output, we can see the pagination that we have created is on the extreme left of the page.
Pagination using the Bootstrap
Aligning pagination using Bootstrap Classes:
The pagination can be aligned on the web page using the flexbox-utilities classes in Bootstrap.
flex-row: This class is added inside the component which helps to align the pagination in rows. This is the default value.
Syntax:
<ul class="pagination flex-row">
<li class="page-item"></li>
</ul>Example: This example illustrates the Bootstrap Pagination using the flex-row class.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous">
<title>Pagination</title>
</head>
<body>
<h1>Home Page</h1>
<ul class="pagination flex-row">
<li class="page-item">
<a class="page-link" href="#">Home</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
</ul>
</body>
</html>
|
Output:
flex-row-reverse: This class when added along inside the component helps to align the pagination in row format but in the reverse direction and to the extreme right of the page.
Syntax:
<ul class="pagination flex-row-reverse">
<li class="page-item"></li>
</ul>Example: This example illustrates the Bootstrap Pagination using the flex-row-reverse class.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous">
<title>Pagination</title>
</head>
<body>
<h1>Home Page</h1>
<ul class="pagination flex-row-reverse">
<li class="page-item">
<a class="page-link" href="#">Home</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
</ul>
</body>
</html>
|
Output:
flex-column: This class when added along inside the component helps to align the pagination in the column.
Syntax:
<ul class="pagination flex-column">
<li class="page-item"></li>
</ul>Example: This example illustrates the Bootstrap Pagination using the flex-column class.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous">
<title>Pagination</title>
</head>
<body>
<h1>Home Page</h1>
<ul class="pagination flex-column">
<li class="page-item">
<a class="page-link" href="#">Home</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
</ul>
</body>
</html>
|
Output:
flex-column-reverse: This class when added along inside the component helps to align the pagination in the column but in the reverse direction.
Syntax:
<ul class="pagination flex-column-reverse">
<li class="page-item"></li>
</ul>Example: This example illustrates the Bootstrap Pagination using the flex-column-reverse class.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous">
<title>Pagination</title>
</head>
<body>
<h1>Home Page</h1>
<ul class="pagination flex-column-reverse">
<li class="page-item">
<a class="page-link" href="#">Home</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
</ul>
</body>
</html>
|
Output:
justify-content-center: This class when added along inside the component helps to align the pagination in the center in row-wise format.
Syntax:
<ul class="pagination justify-content-center">
<li class="page-item"></li>
</ul>Example: This example illustrates the Bootstrap Pagination using the justify-content-center class.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous">
<title>Pagination</title>
</head>
<body>
<h1>Home Page</h1>
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="#">Home</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
</ul>
</body>
</html>
|
Output:
justify-content-start: This class when added along inside the component helps to align the pagination in the start in row-wise format.
Syntax:
<ul class="pagination Justify-content-start ">
<li class="page-item"></li>
</ul>Example: This example illustrates the Bootstrap Pagination using the justify-content-start class.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous">
<title>Pagination</title>
</head>
<body>
<h1>Home Page</h1>
<ul class="pagination justify-content-start">
<li class="page-item">
<a class="page-link" href="#">Home</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
</ul>
</body>
</html>
|
Output:
justify-content-end: This class when added along inside the component helps to align the pagination at the end of the page in row-wise format.
Syntax:
<ul class="pagination justify-content-end">
<li class="page-item"></li>
</ul>Example: This example illustrates the Bootstrap Pagination using the justify-content-end class.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous">
<title>Pagination</title>
</head>
<body>
<h1>Home Page</h1>
<ul class="pagination justify-content-end">
<li class="page-item">
<a class="page-link" href="#">Home</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
</ul>
</body>
</html>
|
Output:
align-items-start: This class when added along inside the component helps to align the pagination at the start of the page in column-wise format.
Syntax:
<ul class="pagination align-items-start">
<li class="page-item"></li>
</ul>Example: This example illustrates the Bootstrap Pagination using the align-items-start class.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous">
<title>Pagination</title>
</head>
<body>
<h1>Home Page</h1>
<ul class="pagination align-items-start">
<li class="page-item">
<a class="page-link" href="#">Home</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
</ul>
</body>
</html>
|
Output:
align-items-end: This class when added along inside the component helps to align the pagination at the end of the page in column-wise format.
Syntax:
<ul class="pagination align-items-end">
<li class="page-item"></li>
</ul>Example: This example illustrates the Bootstrap Pagination using the align-items-end class.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous">
<title>Pagination</title>
</head>
<body>
<h1>Home Page</h1>
<ul class="pagination flex-column align-items-end">
<li class="page-item">
<a class="page-link" href="#">Home</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
</ul>
</body>
</html>
|
Output:
align-items-center: This class when added along inside the component helps to align the pagination to the center of the page in column-wise format.
Syntax:
<ul class="pagination align-items-center">
<li class="page-item"></li>
</ul>Example: This example illustrates the Bootstrap Pagination using the align-items-center class.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous">
<title>Pagination</title>
</head>
<body>
<h1>Home Page</h1>
<ul class="pagination flex-column align-items-center">
<li class="page-item">
<a class="page-link" href="#">Home</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
</ul>
</body>
</html>
|
Output:
Note:
- Mostly pagination is done in row-wise format. In very rare, cases, pagination is given in column-wise format.
- The justify classes will only work when the pagination is done in row-wise format.
- The align-items will only work when the pagination is done in a column-wise format. So, we have to add the flex-column/ flex-column-reverse class with it.