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.
Please Login to comment...