Bootstrap Pagination
Pagination components let users navigate between pages of content, like search results split across several pages. Bootstrap builds pagination from an unordered list with the .pagination class.
You can mark the active page with .active, disable a page link with .disabled, and change the overall size with .pagination-lg or .pagination-sm.
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">1</a></li>
</ul>Basic pagination
Wrap <li class="page-item"> elements inside a <ul class="pagination">, with each item containing an <a class="page-link"> for the clickable link.
Active, disabled and sizes
Add .active to a page-item to highlight the current page, and .disabled to gray out and prevent clicking a page (often used for Previous/Next at the boundaries).
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item active"><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>A row of page links, with page 1 highlighted as the active pageThe active class visually highlights the current page in the pagination list.
<ul class="pagination pagination-sm">
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
</ul>A smaller pagination bar with the Previous link grayed out and unclickablepagination-sm shrinks the size, and disabled prevents interaction with the Previous link.
Key points
- Pagination is built from <ul class="pagination"> and <li class="page-item">.
- Each item contains an <a class="page-link"> for the clickable link.
- .active highlights the current page.
- .disabled prevents interaction, often used for boundary links.