Documentation v8.1.4

Preview Downloads Purchase

Overview

Metronic customizes the Bootstrap Pagination  through the SASS variables in src/sass/components/_variables.scssand adds additonal options in src/sass/components/_pagination.scss.

Basic Example

Use slightly customized pagination with previouse and next icon links:
<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:
<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:
<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:
<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:
<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:
<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:
<ul class="pagination pagination-circle pagination-outline">
    <li class="page-item first disabled m-1">
        <a href="#" class="page-link px-0">
            <!--begin::Svg Icon | path: icons/duotune/arrows/arr079.svg-->
            <span class="svg-icon svg-icon-2">...</span>
            <!--end::Svg Icon-->
        </a>
    </li>
    <li class="page-item previous disabled m-1">
        <a href="#" class="page-link px-0">
            <!--begin::Svg Icon | path: icons/duotune/arrows/arr074.svg-->
            <span class="svg-icon svg-icon-2">...</span>
            <!--end::Svg Icon-->
        </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">
            <!--begin::Svg Icon | path: icons/duotune/arrows/arr071.svg-->
            <span class="svg-icon svg-icon-2">...</span>
            <!--end::Svg Icon-->
        </a>
    </li>
    <li class="page-item last m-1">
        <a href="#" class="page-link px-0">
            <!--begin::Svg Icon | path: icons/duotune/arrows/arr080.svg-->
            <span class="svg-icon svg-icon-2">...</span>
            <!--end::Svg Icon-->
        </a>
    </li>
</ul>
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Video Tutorials
From guides and how-tos, to live demos and code examples to get started right away.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New ?
Latest features and improvements added with our users feedback in mind.
Buy now