Bootstrap 4 Pagination is used to enable navigation between pages on a website. It is the process of organizing content by dividing it into separate pages. For e.g., If you have a web site with lots of pages than you can sort them using pagination. To create pagination, add the .pagination class to an <ul> element.
Basic Pagination:
To create basic bootstrap 4 pagination, add class .pagination to the <ul> element that represents the list of pages. Also add .page-item class to each <li> element and .page-link class to each <a> element.
Example:
<nav>
<ul class="pagination">
<li class="page-item"><a href="#" class="page-link"> Previous </a></li>
<li class="page-item"><a href="#" class="page-link"> 1 </a></li>
<li class="page-item"><a href="#" class="page-link"> 2 </a></li>
<li class="page-item"><a href="#" class="page-link"> 3 </a></li>
<li class="page-item"><a href="#" class="page-link"> Next </a></li>
</ul>
</nav>
Active State:
Use .active class for making the current page number or pagination links stand out from the others. You will use the .active class in the <li> element as shown in the example below:
Example:
<nav>
<ul class="pagination">
<li class="page-item"><a href="#" class="page-link"> Previous </a></li>
<li class="page-item active"><a href="#" class="page-link"> 1 </a></li>
<li class="page-item"><a href="#" class="page-link"> 2 </a></li>
<li class="page-item"><a href="#" class="page-link"> 3 </a></li>
<li class="page-item"><a href="#" class="page-link"> Next </a></li>
</ul>
</nav>
Disabled State:
By using .disabled class, you can make pagination links unclickable. This may be used for disabling the ‘Next’ or ‘Previous’ button. The .disabled class internally makes use of ‘pointer-events: none’ to make the pagination 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:
<nav>
<ul class="pagination">
<li class="page-item disabled"><a href="#" class="page-link" tabindex="-1"> Previous </a></li>
<li class="page-item"><a href="#" class="page-link"> 1 </a></li>
<li class="page-item"><a href="#" class="page-link"> 2 </a></li>
<li class="page-item"><a href="#" class="page-link"> 3 </a></li>
<li class="page-item"><a href="#" class="page-link"> Next </a></li>
</ul>
</nav>
Sizes of Pagination:
You can also change the sizes of pagination i.e. smaller or larger. Apply the relative sizing classes like .pagination-lg, or .pagination-sm to the .pagination base class for creating larger or smaller pagination. If you do not use these classes then pagination has the default size.
Example:
<!-- Large pagination -->
<nav>
<ul class="pagination pagination-lg">
<li class="page-item disabled"><a href="#" class="page-link" tabindex="-1"> Previous </a></li>
<li class="page-item"><a href="#" class="page-link"> 1 </a></li>
<li class="page-item"><a href="#" class="page-link"> 2 </a></li>
<li class="page-item"><a href="#" class="page-link"> 3 </a></li>
<li class="page-item"><a href="#" class="page-link"> Next </a></li>
</ul>
</nav>
<!-- Small pagination -->
<nav>
<ul class="pagination pagination-sm">
<li class="page-item disabled"><a href="#" class="page-link" tabindex="-1"> Previous </a></li>
<li class="page-item"><a href="#" class="page-link"> 1 </a></li>
<li class="page-item"><a href="#" class="page-link"> 2 </a></li>
<li class="page-item"><a href="#" class="page-link"> 3 </a></li>
<li class="page-item"><a href="#" class="page-link"> Next </a></li>
</ul>
</nav>
Alignment of Pagination:
The pagination is aligned horizontally left by default but you can also align the center of the page and aligned horizontally right. Use class .justify-content-center to align center of the page and .justify-content-end class to align at right.
Example:
<!-- Center Align -->
<nav>
<ul class="pagination justify-content-center">
<li class="page-item"><a href="#" class="page-link"> Previous </a></li>
<li class="page-item"><a href="#" class="page-link"> 1 </a></li>
<li class="page-item"><a href="#" class="page-link"> 2 </a></li>
<li class="page-item"><a href="#" class="page-link"> 3 </a></li>
<li class="page-item"><a href="#" class="page-link"> Next </a></li>
</ul>
</nav>
<!-- Right Align -->
<nav>
<ul class="pagination justify-content-end">
<li class="page-item"><a href="#" class="page-link"> Previous </a></li>
<li class="page-item"><a href="#" class="page-link"> 1 </a></li>
<li class="page-item"><a href="#" class="page-link"> 2 </a></li>
<li class="page-item"><a href="#" class="page-link"> 3 </a></li>
<li class="page-item"><a href="#" class="page-link"> Next </a></li>
</ul>
</nav>