Pagination in Bootstrap 4

You have seen a lot of web sites where there are lots of pages, and each page is having a page count and a series of page-links associated at the bottom of each web page. This is called pagination and It helps in quickly navigate or switch users from the current page to any other existing page within a website. In this chapter, you will learn about creating pagination using Bootstrap 4.

Basic Pagination in Bootstrap

Pagination is a series of page numbers reside in the form of links that allow users to navigate or switch from one page to another within the web site. You have to add a class .pagination to the Unordered List, i.e., <ul> element for creating basic pagination. Then, using the .page-link class within the List <li> element, you can provide hyperlinks to those pagination components.

Example:
<ul class = "pagination">
    <li class = "page-item"> <a class="page-link" href="#"> << </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="#"> 4 </a> </li>
    <li class = "page-item"> <a class="page-link" href="#"> >> </a> </li>
</ul>
Output:

Show State of Pagination Links

You can make use of the .active class or .disabled class for highlighting user's current page or disabling the page link respectively. This is how it will look like:

Active state:

Here is a code snippet showing how to use the .active class:

Example:
<ul class = "pagination">
    <li class = "page-item"> <a class="page-link" href="#"> << </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 active"> <a class="page-link" href="#"> 4 </a> </li>
    <li class = "page-item"> <a class="page-link" href="#"> >> </a> </li>
</ul>
Output:

Disable State:

Example:
<ul class = "pagination">
    <li class = "page-item"> <a class="page-link" href="#"> << </a> </li>
    <li class = "page-item disabled"> <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 active"> <a class="page-link" href="#"> 4 </a> </li>
    <li class = "page-item"> <a class="page-link" href="#"> >> </a> </li>
</ul>
Output:

Different Sized Pagination

Developers can change the size of pagination to either big or small, as per their requirement. For this, you have to make use of the .pagination-lg and .pagination-sm classes for creating large block pagination and small block pagination. Here is a code snippet of its working:

Example:
<ul class="pagination pagination-sm">
    <li class = "page-item"> <a class="page-link" href="#"> << </a> </li>
    <li class = "page-item disabled"> <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="#"> 4 </a> </li>
    <li class = "page-item"> <a class="page-link" href="#"> >> </a> </li>
</ul>
Output:
Example:
<ul class="pagination pagination-lg">
    <li class = "page-item"> <a class="page-link" href="#"> << </a> </li>
    <li class = "page-item disabled"> <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="#"> 4 </a> </li>
    <li class = "page-item"> <a class="page-link" href="#"> >> </a> </li>
</ul>
Output:

Alignment in Pagination

Utility classes are used for changing the alignment of the pagination. It will look something like this:

Example:
<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>
</ul>
Output:
Example:
<ul class="pagination justify-content-center">
    <li class = "page-item"> <a class="page-link" href="#"> 1 </a> </li>
    <li class = "page-item disabled"> <a class="page-link" href="#"> 2 </a> </li>
</ul>
Output:
Example:
<ul class="pagination justify-content-end">
    <li class = "page-item"> <a class="page-link" href="#"> 1 </a> </li>
    <li class = "page-item"> <a class="page-link" href="#"> 2 </a> </li>
</ul>
Output:

Breadcrumb Type Pagination

This is another type of pagination that is separated by front-slashes. For this, you have to make use of the .breadcrumb and .breadcrumb-item classes which will automatically indicate the current page's location. Here is a code snippet:

Example:
<ul class="breadcrumb">
    <li class="breadcrumb-item"> <a href="#"> About Us </a></li>
    <li class="breadcrumb-item"><a href="#"> Authors </a></li>
    <li class="breadcrumb-item"><a href="#"> Tech Writers </a></li>
    <li class="breadcrumb-item active"> Home </li>
</ul>
Output:

Scroll Back to Top