pagination
Overview
Metronic customizes the Bootstrap Pagination through the SASS variables in src/sass/components/_variables.scss
and adds additonal options in src/sass/components/_pagination.scss
.
Basic Example
Use slightly customized pagination with previouse and next icon links:
html
<ul class="pagination">
<li class="page-item previous disabled"><a href="#" class="page-link"><i class="previous"></i></a></li>
<li class="page-item "><a href="#" class="page-link">1</a></li>
<li class="page-item active"><a href="#" class="page-link">2</a></li>
<li class="page-item "><a href="#" class="page-link">3</a></li>
<li class="page-item "><a href="#" class="page-link">4</a></li>
<li class="page-item "><a href="#" class="page-link">5</a></li>
<li class="page-item "><a href="#" class="page-link">6</a></li>
<li class="page-item next"><a href="#" class="page-link"><i class="next"></i></a></li>
</ul>
Offset
Use slightly customized pagination with arrows and offset:
html
<ul class="pagination">
<li class="page-item previous disabled"><a href="#" class="page-link"><i class="previous"></i></a></li>
<li class="page-item "><a href="#" class="page-link">1</a></li>
<li class="page-item active"><a href="#" class="page-link">2</a></li>
<li class="page-item "><a href="#" class="page-link">3</a></li>
<li class="page-item "><a href="#" class="page-link">...</a></li>
<li class="page-item "><a href="#" class="page-link">5</a></li>
<li class="page-item "><a href="#" class="page-link">6</a></li>
<li class="page-item next"><a href="#" class="page-link"><i class="next"></i></a></li>
</ul>
Button With Text
Previous and next buttons with text:
html
<ul class="pagination">
<li class="page-item previous disabled">
<span class="page-link page-text">Previous</span></span>
</li>
<li class="page-item "><a href="#" class="page-link">1</a></li>
<li class="page-item active"><a href="#" class="page-link">2</a></li>
<li class="page-item "><a href="#" class="page-link">3</a></li>
<li class="page-item "><a href="#" class="page-link">4</a></li>
<li class="page-item "><a href="#" class="page-link">5</a></li>
<li class="page-item "><a href="#" class="page-link">6</a></li>
<li class="page-item next">
<a class="page-link page-text" href="#">Next</span></a>
</li>
</ul>
Circle Style
Pagination with circle buttons:
html
<ul class="pagination pagination-circle">
<li class="page-item previous disabled"><a href="#" class="page-link"><i class="previous"></i></a></li>
<li class="page-item "><a href="#" class="page-link">1</a></li>
<li class="page-item active"><a href="#" class="page-link">2</a></li>
<li class="page-item "><a href="#" class="page-link">3</a></li>
<li class="page-item "><a href="#" class="page-link">4</a></li>
<li class="page-item "><a href="#" class="page-link">5</a></li>
<li class="page-item "><a href="#" class="page-link">6</a></li>
<li class="page-item next"><a href="#" class="page-link"><i class="next"></i></a></li>
</ul>
Outline Style
Use slightly customized pagination with outline buttons:
html
<ul class="pagination pagination-outline">
<li class="page-item previous disabled m-1"><a href="#" class="page-link"><i class="previous"></i></a></li>
<li class="page-item m-1"><a href="#" class="page-link">1</a></li>
<li class="page-item active m-1"><a href="#" class="page-link">2</a></li>
<li class="page-item m-1"><a href="#" class="page-link">3</a></li>
<li class="page-item m-1"><a href="#" class="page-link">4</a></li>
<li class="page-item m-1"><a href="#" class="page-link">5</a></li>
<li class="page-item m-1"><a href="#" class="page-link">6</a></li>
<li class="page-item next m-1"><a href="#" class="page-link"><i class="next"></i></a></li>
</ul>
Outline & Circle Styles
Pagination with outline and circle buttons:
html
<ul class="pagination pagination-circle pagination-outline">
<li class="page-item previous disabled m-1"><a href="#" class="page-link"><i class="previous"></i></a></li>
<li class="page-item m-1"><a href="#" class="page-link">1</a></li>
<li class="page-item active m-1"><a href="#" class="page-link">2</a></li>
<li class="page-item m-1"><a href="#" class="page-link">3</a></li>
<li class="page-item m-1"><a href="#" class="page-link">4</a></li>
<li class="page-item m-1"><a href="#" class="page-link">5</a></li>
<li class="page-item m-1"><a href="#" class="page-link">6</a></li>
<li class="page-item next m-1"><a href="#" class="page-link"><i class="next"></i></a></li>
</ul>
Custom Icons
Pagination with custom icons:
html
<ul class="pagination pagination-circle pagination-outline">
<li class="page-item first disabled m-1">
<a href="#" class="page-link px-0">
<i class="ki-duotone ki-double-left fs-2"><span class="path1"></span><span class="path2"></span></i>
</a>
</li>
<li class="page-item previous disabled m-1">
<a href="#" class="page-link px-0">
<i class="ki-duotone ki-left fs-2"></i>
</a>
</li>
<li class="page-item m-1"><a href="#" class="page-link">1</a></li>
<li class="page-item active m-1"><a href="#" class="page-link">2</a></li>
<li class="page-item m-1"><a href="#" class="page-link">3</a></li>
<li class="page-item m-1"><a href="#" class="page-link">4</a></li>
<li class="page-item m-1"><a href="#" class="page-link">5</a></li>
<li class="page-item m-1"><a href="#" class="page-link">6</a></li>
<li class="page-item next m-1">
<a href="#" class="page-link px-0">
<i class="ki-duotone ki-right fs-2"></i>
</a>
</li>
<li class="page-item last m-1">
<a href="#" class="page-link px-0">
<i class="ki-duotone ki-double-right fs-2"><span class="path1"></span><span class="path2"></span></i>
</a>
</li>
</ul>