How to align pagination in Bootstrap 4 ? - GeeksforGeeks

10 Nov, 2021
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="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"           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="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"           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="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"           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="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"           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="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"           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="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"           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="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"           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="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"           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="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"           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="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"           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="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"           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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-Questions
HTML-Questions
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property