Bootstrap pagination is the process of displaying a limited number of results on every page. It enhances the website's performance as well as its appearance.
Example
Steps to create bootstrap 5 pagination:
<nav>
element's base class.
.pagination
to <ul>
element base class..page-item
to <li>
element base class..page-link
to every <a>
element base class.General Syntax
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">1</a></li>
</ul>
</nav>
Source Code
<div class="container mt-4">
<p class="text-center">Simple Pagination</p>
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Prev</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="#">Next</a></li>
</ul>
</nav>
</div>
General Syntax
<nav>
<ul class="pagination">
<li class="page-item disabled"><a href="#" class="page-link">Page Item</a></li>
<li class="page-item active"><a href="#" class="page-link">Page Item</a></li>
</ul>
</nav>
Source Code
<div class="container mt-4">
<p class="text-center">Pagination: Active Page Item</p>
<ul class="pagination">
<li class="page-item disabled"><a href="#" class="page-link">Prev</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">Next</a></li>
</ul>
</div>
<!--container-->
To disable any page item, you have to add the .disabled
class to any page item <li>
element's base class.
Example
General Syntax
<nav>
<ul class="pagination">
<li class="page-item disabled"><a class="page-link">Previous</a></li>
</ul>
</nav>
Source Code
<div class="container mt-4">
<p class="text-center">Pagination:Disabled Item</p>
<nav>
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#">Prev</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="#">Next</a>
</li>
</ul>
</nav>
</div>
To make an active & disabled page item, assign .active
& .disabled
class to the page item(<li>
) element's base class respectively.
Example
General Syntax
<nav>
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#">Page Item</a></li>
<li class="page-item active"><a class="page-link" href="#">Page Item</a></li>
</ul>
</nav>
Source Code
<div class="container mt-4">
<p class="text-center">Pagination:Active/Disabled Item</p>
<nav>
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#">Prev</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item disabled"><a class="page-link" href="#">2</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
Steps to assign pagination size:
.pagination-sm
class to the unordered list <ul>
element's base class.
.pagination-lg
class to unordered list <ul>
element's base class.
Example
Source Code
<div class="container mt-4">
<p class="text-center">Pagination:Smaller Size</p>
<nav aria-label="Pagination example">
<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="#">Next</a></li>
</ul>
</nav>
</div><!--container-->
Code Explanation
Please keep in mind that, pagination size can be controlled by .pagination-sm
& .pagination-lg
. To create
small pagination item assign.pagination-sm
to the pagination container base class .
Example
Source Code
<div class="container mt-4">
<p class="text-center">Pagination:Large Size</p>
<nav aria-label="Pagination example">
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">Prev</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="#">Next</a></li>
</ul>
</nav>
</div>
Code Explanation
Please keep in mind that, to create a large paginated item assign .pagination-lg
to the pagination container base class.
Pagination alignment can be done easily by flexbox utility classes.
To change the pagination alignment, add flexbox utility classes inside the unordered list container(<ul>
) element's base class.
Example
Source Code
<div class="container mt-4">
<p class="text-center">Pagination: Alignment</p>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#!" tabindex="-1" aria-disabled="true">Prev</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="#!">Next</a>
</li>
</ul>
</nav>
</div>
<!--container-->
Code Explanation
Please keep in mind that, the paginated item is by default left-aligned.
Paginated items can be aligned horizontally center by assigning the .justify-content-center
class to the pagination container's i.e. (<ul>
) element's base class.
Example
Source Code
<div class="container mt-4">
<p class="text-center">Pagination:Alignment</p>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#!" >Prev</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="#!">Next</a>
</li>
</ul>
</nav>
</div><!--container-->
Paginated items can be aligned right by assigning the .justify-content-end
class to the <ul>
element's base class.
Example
Source Code
<div class="container mt-4">
<p class="text-center">Pagination:Right Alignment</p>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#!" tabindex="-1" aria-disabled="true">Prev</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="#!">Next</a>
</li>
</ul>
</nav>
</div>
<!--container-->