Default Pagination
Use pagination-* class to ul element to indicate a series of related content exists across multiple pages.
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-primary mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-dark mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-light mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>Disabled Pagination
Use disabled class to ul element to indicate a series of related content exists across multiple pages.
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-primary mb-0">
<li class="page-item disabled">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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 disabled"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>Subtle Pagination
Use pagination-*-light class to ul element to indicate a series of related content exists across multiple pages.
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-primary-light mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-dark-light mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-secondary-light mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>Rounded Pagination
Use .pagination-rounded class to ul element to indicate a series of related content exists across multiple pages.
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-rounded pagination-primary mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-rounded pagination-dark mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-rounded pagination-light mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>Rounded Pagination light
Use .pagination-rounded class to ul element to indicate a series of related content exists across multiple pages.
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-rounded pagination-primary-light mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-rounded pagination-dark-light mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-rounded pagination-light-light mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>Pagination Sizes
Use .pagination-sm class to ul element to indicate a series of related content exists across multiple pages.
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-sm mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-md mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-lg mb-0">
<li class="page-item">
<a class="page-link" href="#">
<i class="ri-arrow-left-s-line fw-semibold"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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">
<a class="page-link" href="#">
<i class="ri-arrow-right-s-line fw-semibold"></i>
</a>
</li>
</ul>
</nav>