Pagination
Pagination
Default pagination style
<nav>
<ul class="pagination">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><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)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><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)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-xs">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><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)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
Pagination Gutter
add .pagination-gutter
to change the style
<nav>
<ul class="pagination pagination-gutter">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><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)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm pagination-gutter">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><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)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-xs pagination-gutter">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><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)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
Pagination Color
add .pagination-gutter
to change the style
<nav>
<ul class="pagination pagination-gutter pagination-primary no-bg">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-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 page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-gutter pagination-danger">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><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)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm pagination-gutter pagination-info">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><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)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-xs pagination-gutter pagination-warning">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><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)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
Pagination Circle
add .pagination-circle
to change the style
<nav>
<ul class="pagination pagination-circle">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><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)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm pagination-circle">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><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)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-xs pagination-circle">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><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)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>