Bootstrap Pagination
Use “pagination” class to add pagination in bootstrap.
Syntax:
<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">Next</a></li>
</ul>
</nav>
How use Disabled class to disable page?
Syntax:
<li class="page-item disabled"><a href="#" class="page-link" tabindex="-1">Previous</a></li>
“disabled” did not disable the click functionality so we use <span> with disable to disable page with click functionality.
Syntax:
<li class="page-item disabled"><span class="page-link">Previous</span></li>
Changing size of pagination
Add .pagination-lg, or .pagination-sm to the .pagination base class.
Syntax:
<nav>
<ul class="pagination pagination-lg">
<li class="page-item disabled"><span class="page-link">Previous</span>
</li>
</ul>
</nav>
Alignment of pagination
By default it align on the left if you want to align on the center then you use following class:
Syntax:
<nav>
<ul class="pagination justify-content-center">
<li class="page-item"><a href="#" class="page-link">Previous</a>
</li>
</ul>
</nav>
Class .justify-content-end to align the pagination to the right:
Syntax:
<nav>
<ul class="pagination justify-content-end">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
</ul>
</nav>