Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to align pagination in Bootstrap 4 ?

  • Last Updated : 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=
          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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!