Bootstrap 4 - Pagination

You may have seen many websites or blogs with multiple pages where each page has a page number and a series of links associated at the bottom of each web page. This is called pagination, and it helps users quickly navigate or switch from the current page to another existing page within the website. In this tutorial, you will learn about creating pagination using Bootstrap 4.

Basic Pagination in Bootstrap 4

Pagination is a series of page numbers that reside in the form of links that allow users to navigate or switch from one page to another within the website. For creating basic pagination in Bootstrap 4, the class .pagination is used in an unordered list. Then, the .page-item class is used in all its <li> elements containing a hyperlink with the .page-link class.

Example:

<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">&#10094; </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="#">&#10095;</a></li>
</ul>

Output:

Show State of Pagination Links

In pagination, along with the .page-item class, you can use an .active or .disabled class to highlight the user's current page or disable any page links. Here's a code snippet showing how to use the active and disabled classes:

Example:

<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">&#10094; </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 active"><a class="page-link" href="#">&#10095;</a></li>
</ul>

Output:

Different Sized Pagination

You can change the pagination size to larger or smaller according to the design needs. It requires using the .pagination-lg and .pagination-sm classes to create large and small pagination blocks. Here's a code snippet of how it works:

Example:

<ul class="pagination pagination-sm">
</ul>

Output:

Example:

<ul class="pagination pagination-lg">
</ul>

Output:

Alignment in Pagination

Bootstrap 4 Utility classes are used to change the alignment of pagination. It will look something like this:

Example:

<ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="#">&#10094; </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="#">&#10095;</a></li>
</ul>

Output:

Example:

<ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="#">&#10094; </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="#">&#10095;</a></li>
</ul>

Output:

Breadcrumb Type Pagination

This is another type of pagination that is separated by a front slash. You must use 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: