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:
copy < 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:
copy < 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:
copy < 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:
copy < 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:
copy < 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:
copy < 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:
copy < 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>