Messages
Liam Carter uploaded a new document to Project Phoenix
5 minutes ago
Ava Mitchell commented on Marketing Campaign Q3
12 minutes ago
Noah Blake updated the status of Client Onboarding
30 minutes ago
30 minutes ago
Sophia Taylor sent an invoice for Service Renewal
1 hour ago
Ethan Moore completed the task UI Review
2 hours ago
Olivia White assigned you a task in Sales Pipeline
Yesterday
Pagination
Examples
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Pagination on Bootstrap
<nav aria-label="Page navigation example">
<ul class="pagination mb-0">
<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="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
Use .pagination inside <nav> for accessible, easy-to-click page links.
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="javascript: void(0);" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">3</a></li>
<li class="page-item">
<a class="page-link" href="javascript: void(0);">Next</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="javascript: void(0);" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">3</a></li>
<li class="page-item">
<a class="page-link" href="javascript: void(0);">Next</a>
</li>
</ul>
</nav>
Align pagination using flexbox utilities, such as .justify-content-center to center it.
<nav>
<ul class="pagination pagination-boxed pagination-info">
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Previous">
<i class="ti ti-chevron-left"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
<li class="page-item active"><a class="page-link" href="javascript: void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">3</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">4</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">5</a></li>
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Next">
<i class="ti ti-chevron-right align-middle"></i>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-boxed pagination-secondary">
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Previous">
<i data-lucide="arrow-left"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
<li class="page-item active"><a class="page-link" href="javascript: void(0);">3</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">4</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">5</a></li>
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Next">
<i data-lucide="arrow-right"></i>
</a>
</li>
</ul>
</nav>
Add classes like .pagination-primary, .pagination-info, or .pagination-secondary to customize pagination color.
<nav aria-label="...">
<ul class="pagination mb-0">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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="#">Next</a>
</li>
</ul>
</nav>
Add .disabled and tabindex="-1" to .page-item to make it non-interactive.
<nav>
<ul class="pagination pagination-boxed">
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Previous">
<i class="ti ti-chevron-left"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
<li class="page-item active"><a class="page-link" href="javascript: void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">3</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">4</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">5</a></li>
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Next">
<i class="ti ti-chevron-right align-middle"></i>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-boxed">
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Previous">
<i data-lucide="arrow-left"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
<li class="page-item active"><a class="page-link" href="javascript: void(0);">3</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">4</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">5</a></li>
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Next">
<i data-lucide="arrow-right"></i>
</a>
</li>
</ul>
</nav>
Add icons like <i class="ti ti-chevron-**"></i> or SVGs inside .page-link for custom pagination arrows.
<nav>
<ul class="pagination pagination-lg">
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">3</a></li>
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm mb-0">
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">3</a></li>
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Use .pagination-lg or .pagination-sm to change pagination size.
<ul class="pagination pagination-boxed">
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
<li class="page-item active"><a class="page-link" href="javascript: void(0);">3</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">4</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">5</a></li>
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
<ul class="pagination pagination-lg pagination-boxed">
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
<li class="page-item active"><a class="page-link" href="javascript: void(0);">3</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">4</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">5</a></li>
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
<ul class="pagination pagination-sm pagination-boxed mb-0">
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
<li class="page-item active"><a class="page-link" href="javascript: void(0);">3</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">4</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">5</a></li>
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
Use .pagination-boxed with .pagination to give pagination items a boxed appearance.
<nav>
<ul class="pagination pagination-rounded pagination-boxed mb-0">
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
<li class="page-item active"><a class="page-link" href="javascript: void(0);">3</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">4</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">5</a></li>
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Use .pagination-rounded with .pagination to create rounded pagination links.
<nav>
<ul class="pagination pagination-soft-danger pagination-boxed mb-0">
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Previous">
<i class="ti ti-chevron-left"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
<li class="page-item active"><a class="page-link" href="javascript: void(0);">3</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">4</a></li>
<li class="page-item"><a class="page-link" href="javascript: void(0);">5</a></li>
<li class="page-item">
<a class="page-link" href="javascript: void(0);" aria-label="Next">
<i class="ti ti-chevron-right"></i>
</a>
</li>
</ul>
</nav>
Use .pagination-soft-** with .pagination for a soft-colored pagination style.