Documentation and examples for showing pagination to indicate a series of related content exists across multiple
pages.
Read the official
Bootstrap Documentation for a full list of
instructions
and other options.
Pagination classes for First, Last, Next and Previous elements are .first, .last, .next and .prev or .previous respectively and use these classes along with .page-item class.
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="mdi mdi-skip-previous-outline mdi-22px "></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="mdi mdi-chevron-left mdi-22px "></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 next">
<a class="page-link" href="javascript:void(0);"><i class="mdi mdi-chevron-right mdi-22px"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="mdi mdi-skip-next-outline mdi-22px "></i></a>
</li>
</ul>
</nav>| Class | Value |
|---|---|
class="pagination pagination-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Pagination links are customizable for different circumstances. Use .disabled for links that
appear un-clickable and .active to indicate the current page.
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item first disabled">
<a class="page-link" href="#"><i class="mdi mdi-skip-previous-outline mdi-22px "></i></a>
</li>
<li class="page-item prev disabled">
<a class="page-link" href="#"><i class="mdi mdi-chevron-left mdi-22px "></i></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="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="#"><i class="mdi mdi-chevron-right mdi-22px"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="#"><i class="mdi mdi-skip-next-outline mdi-22px "></i></a>
</li>
</ul>
</nav>Add .pagination-outline-* class with .pagination class for bordered pagination
style.
<nav aria-label="Page navigation">
<ul class="pagination pagination-outline-primary">
<li class="page-item first">
<a class="page-link" href="#"><i class="mdi mdi-skip-previous-outline mdi-22px "></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="#"><i class="mdi mdi-chevron-left mdi-22px "></i></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 active">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="#"><i class="mdi mdi-chevron-right mdi-22px"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="#"><i class="mdi mdi-skip-next-outline mdi-22px "></i></a>
</li>
</ul>
</nav>| Class | Value |
|---|---|
class="pagination pagination-outline-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Just add class .pagination-rounded with class .pagination to create rounded
pagination.
<nav aria-label="Page navigation">
<ul class="pagination pagination-rounded">
<li class="page-item first">
<a class="page-link" href="#"><i class="mdi mdi-skip-previous-outline mdi-22px "></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="#"><i class="mdi mdi-chevron-left mdi-22px "></i></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 active">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="#"><i class="mdi mdi-chevron-right mdi-22px"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="#"><i class="mdi mdi-skip-next-outline mdi-22px "></i></a>
</li>
</ul>
</nav>Just add class .pagination-rounded and pagination-outline-* with class .pagination to create outline rounded
pagination.
<nav aria-label="Page navigation">
<ul class="pagination pagination-rounded pagination-outline-primary">
<li class="page-item first">
<a class="page-link" href="#"><i class="mdi mdi-skip-previous-outline mdi-22px "></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="#"><i class="mdi mdi-chevron-left mdi-22px "></i></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 active">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="#"><i class="mdi mdi-chevron-right mdi-22px"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="#"><i class="mdi mdi-skip-next-outline mdi-22px "></i></a>
</li>
</ul>
</nav>
Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for
additional sizes.
<!-- Small Pagination -->
<nav aria-label="Page navigation">
<ul class="pagination pagination-sm">
<li class="page-item prev">
<a class="page-link" href="#"><i class="ri-skip-back-mini-line ri-20px"></i></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 active">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="#"><i class="ri-skip-forward-mini-line ri-20px"></i></a>
</li>
</ul>
</nav>
<!-- Default Pagination -->
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item prev">
<a class="page-link" href="#"><i class="mdi mdi-skip-previous-outline mdi-22px "></i></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 active">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="#"><i class="mdi mdi-skip-next-outline mdi-22px "></i></a>
</li>
</ul>
</nav>
<!-- Large Pagination -->
<nav aria-label="Page navigation">
<ul class="pagination pagination-lg">
<li class="page-item prev">
<a class="page-link" href="#"><i class="ri-skip-back-mini-line ri-24px"></i></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 active">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="#"><i class="ri-skip-forward-mini-line ri-24px"></i></a>
</li>
</ul>
</nav>Change the alignment of pagination components with flexbox utilities.
<!-- Default Left Alignment -->
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item prev">
<a class="page-link" href="#"><i class="mdi mdi-skip-previous-outline mdi-22px "></i></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 active">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="#"><i class="mdi mdi-skip-next-outline mdi-22px "></i></a>
</li>
</ul>
</nav>
<!-- Center Alignment -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item prev">
<a class="page-link" href="#"><i class="mdi mdi-skip-previous-outline mdi-22px "></i></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 active">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="#"><i class="mdi mdi-skip-next-outline mdi-22px "></i></a>
</li>
</ul>
</nav>
<!-- Right Alignment -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
<li class="page-item prev">
<a class="page-link" href="#"><i class="mdi mdi-skip-previous-outline mdi-22px "></i></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 active">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="#"><i class="mdi mdi-skip-next-outline mdi-22px "></i></a>
</li>
</ul>
</nav>