Bootstrap 4 | Pagination - GeeksforGeeks

10 Jun, 2019
Pagination is used to enable navigation between pages in a website. The pagination used in Bootstrap has a large block of connected links that are hard to miss and are easily scalable.
Basic Pagination:
The basic pagination can be specified using the following classes.
The .pagination class is used to specify pagination on a list group.
The .page-item class is used to specify each pagination item in the group.
The .page-link class is used to specify the link in the pagination item.
Example:
<!DOCTYPE html><html><head>              <title>Bootstrap 4 | Pagination</title>    <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">         <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">             <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     </script>             <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">     </script>             <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">     </script> </head>  <body>    <div class="container">        <h1>Bootstrap 4 | Basic Pagination</h1>          <!-- Declare the pagination class -->        <ul class="pagination">              <!-- Declare the item in the group -->            <li class="page-item">                  <!-- Declare the link of the item -->                <a class="page-link" href="#">Previous</a>            </li>              <!-- Rest of the pagination items -->            <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>            <li class="page-item">                <a class="page-link" href="#">Next</a>            </li>        </ul>    </div></body></html>
Output:
Disabled State:
The pagination links could be styled to make them appear unclickable by using the .disabled class. This may be used for disabling the ‘Previous’ or ‘Next’ button.
The .disabled class internally makes use of ‘pointer-events: none’ to make the link unclickable, however, as this specification is not always implemented, it is preferred to make it not possible to be navigated to by setting the ‘tabindex’ property to -1. This property controls whether an element can be navigated using the tab key.
Example:
<!DOCTYPE html><html><head>      <title>Bootstrap 4 | Pagination</title><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">         <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>         <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script>         <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head>  <body>    <div class="container">        <h1>Bootstrap 4 | Pagination Disabled State</h1>          <!-- Declare the pagination class -->        <ul class="pagination">              <!-- Specify the disabled class to style this item disabled -->            <li class="page-item disabled">                  <!-- Specify tabindex to make the link non navigatable -->                <a class="page-link" href="#" tabindex="-1">Previous</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>            <li class="page-item">                <a class="page-link" href="#">Next</a>            </li>        </ul>    </div></body></html>
Output:
Active State:
The pagination links could be styled to highlight them as the current active page by using the .active class on the pagination item.
Example:
<!DOCTYPE html><html><head>      <title>Bootstrap 4 | Pagination</title><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">         <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>         <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script>         <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head>  <body>    <div class="container">        <h1>Bootstrap 4 | Pagination Active State</h1>          <!-- Declare the pagination class -->        <ul class="pagination">            <li class="page-item">                <a class="page-link" href="#">Previous</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>              <!-- Specify the active class to style this item active -->            <li class="page-item active">                <a class="page-link" href="#">3</a>            </li>                          <li class="page-item">                <a class="page-link" href="#">Next</a>            </li>        </ul>    </div></body></html>
Output:
Sizing the pagination group:
The pagination group could be made larger or smaller by using additional classes. There are 3 possible sizes of input groups.
The .pagination-sm class is used for a smaller size.
The .pagination-lg class is used for a larger size.
The .pagination class is the default size.
Example:
<!DOCTYPE html><html><head>      <title>Bootstrap 4 | Pagination</title><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">         <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>         <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script>         <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head>  <body>    <div class="container">        <h1>Bootstrap 4 | Pagination Sizing</h1>        <b>Large Pagination</b>          <!-- Specify pagination-lg for large pagination group -->        <ul class="pagination pagination-lg">            <li class="page-item">                <a class="page-link" href="#">Previous</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>            <li class="page-item">                <a class="page-link" href="#">Next</a>            </li>        </ul>          <b>Small Pagination</b>          <!-- Specify pagination-sm for small pagination group -->        <ul class="pagination pagination-sm">            <li class="page-item">                <a class="page-link" href="#">Previous</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>            <li class="page-item">                <a class="page-link" href="#">Next</a>            </li>        </ul>          <b>Normal Pagination</b>          <!-- Normal size pagination -->        <ul class="pagination">            <li class="page-item">                <a class="page-link" href="#">Previous</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>            <li class="page-item">                <a class="page-link" href="#">Next</a>            </li>        </ul>    </div></body></html>
Output:
Alignment of the pagination group:
The pagination group could be aligned to the right or center by using the flexbox utility classes.
The .justify-content-center class is used to align the group to the center.
The .justify-content-end class is used to align the group to the right.
Example:
<!DOCTYPE html><html><head>      <title>Bootstrap 4 | Pagination</title><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">         <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>         <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script>         <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head>  <body>    <div class="container">        <h1>Bootstrap 4 | Pagination Alignment</h1>        <b>Align to the center</b>          <!-- Specify justify-content-center to align to the center -->        <ul class="pagination justify-content-center">            <li class="page-item">                <a class="page-link" href="#">Previous</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>            <li class="page-item">                <a class="page-link" href="#">Next</a>            </li>        </ul>        <b>Align to the right</b>          <!-- Specify justify-content-end to align to the right -->        <ul class="pagination justify-content-end">            <li class="page-item">                <a class="page-link" href="#">Previous</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>            <li class="page-item">                <a class="page-link" href="#">Next</a>            </li>        </ul>    </div></body></html>
Output:
Bootstrap-4
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to align navbar items to the right in Bootstrap 4 ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills