Notifications
unread notification
Emily Johnson
commented on a task in
Design Sprint
12 minutes ago
upload notification
Michael Lee
uploaded files to
Marketing Assets
25 minutes ago
Just now
alert
Sophia Ray
flagged an issue in
Bug Tracker
40 minutes ago
event notification
David Kim
scheduled a meeting for
UX Review
1 hour ago
edit
Isabella White
updated the document in
Product Specs
2 hours ago
30 minutes ago
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="YOUR ICON align-middle"></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="YOUR ICON 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 class="YOUR ICON align-middle"></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="YOUR ICON align-middle"></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="YOUR ICON"></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="YOUR ICON"></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 class="YOUR ICON"></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="YOUR ICON"></i>
</a>
</li>
</ul>
</nav>
Add icons like
<i class="YOUR ICON"></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="YOUR ICON"></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="YOUR ICON"></i>
</a>
</li>
</ul>
</nav>
Use
.pagination-soft-**
with
.pagination
for a soft-colored pagination style.