How to align pagination in Bootstrap 4 ?
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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <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.
.png)