Paginations | Ecada - Responsive Multipurpose Template

Style Switcher

Theme Colors

Header Color

support@ecada.com

(0123)-123-456-789

Theme components

Pagination large

Pagination default

Pagination small

Pagination left

Pagination center

Pagination right

Pager center

Pager float

Shortcode pagination large

<nav>
    <ul class="pagination pagination-lg">
        <li class="disabled"><a href="javascript:void(0);" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
        <li class="active"><a href="javascript:void(0);">1</a></li>
        <li><a href="javascript:void(0);">2</a></li>
        <li><a href="javascript:void(0);">3</a></li>
        <li><a href="javascript:void(0);">4</a></li>
        <li><a href="javascript:void(0);">5</a></li>
        <li><a href="javascript:void(0);" aria-label="Next"><span aria-hidden="true">»</span></a></li>
    </ul>
</nav>

Shortcode pagination default

<nav>
    <ul class="pagination">
        <li class="disabled"><a href="javascript:void(0);" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
        <li class="active"><a href="javascript:void(0);">1</a></li>
        <li><a href="javascript:void(0);">2</a></li>
        <li><a href="javascript:void(0);">3</a></li>
        <li><a href="javascript:void(0);">4</a></li>
        <li><a href="javascript:void(0);">5</a></li>
        <li><a href="javascript:void(0);" aria-label="Next"><span aria-hidden="true">»</span></a></li>
    </ul>
</nav>

Shortcode pagination small

<nav>
    <ul class="pagination pagination-sm">
        <li class="disabled"><a href="javascript:void(0);" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
        <li class="active"><a href="javascript:void(0);">1</a></li>
        <li><a href="javascript:void(0);">2</a></li>
        <li><a href="javascript:void(0);">3</a></li>
        <li><a href="javascript:void(0);">4</a></li>
        <li><a href="javascript:void(0);">5</a></li>
        <li><a href="javascript:void(0);" aria-label="Next"><span aria-hidden="true">»</span></a></li>
    </ul>
</nav>

Shortcode pagination left

<nav>
    <ul class="pagination">
        <li class="disabled"><a href="javascript:void(0);" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
        <li class="active"><a href="javascript:void(0);">1</a></li>
        <li><a href="javascript:void(0);">2</a></li>
        <li><a href="javascript:void(0);">3</a></li>
        <li><a href="javascript:void(0);">4</a></li>
        <li><a href="javascript:void(0);">5</a></li>
        <li><a href="javascript:void(0);" aria-label="Next"><span aria-hidden="true">»</span></a></li>
    </ul>
</nav>

Shortcode pagination center

<nav>
    <ul class="pagination pagination-center">
        <li class="disabled"><a href="javascript:void(0);" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
        <li class="active"><a href="javascript:void(0);">1</a></li>
        <li><a href="javascript:void(0);">2</a></li>
        <li><a href="javascript:void(0);">3</a></li>
        <li><a href="javascript:void(0);">4</a></li>
        <li><a href="javascript:void(0);">5</a></li>
        <li><a href="javascript:void(0);" aria-label="Next"><span aria-hidden="true">»</span></a></li>
    </ul>
</nav>

Shortcode pagination right

<nav>
    <ul class="pagination pagination-right">
        <li class="disabled"><a href="javascript:void(0);" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
        <li class="active"><a href="javascript:void(0);">1</a></li>
        <li><a href="javascript:void(0);">2</a></li>
        <li><a href="javascript:void(0);">3</a></li>
        <li><a href="javascript:void(0);">4</a></li>
        <li><a href="javascript:void(0);">5</a></li>
        <li><a href="javascript:void(0);" aria-label="Next"><span aria-hidden="true">»</span></a></li>
    </ul>
</nav>

Shortcode pager center

<ul class="pagination pagination-center list-unstyled">
    <li class="page-item previous"><a href="javascript:void(0);" class="page-link"><span>«</span> Prev</a></li>
    <li class="page-item next"><a href="javascript:void(0);" class="page-link">Next <span>»</span></a></li>
</ul>

Shortcode pager float

<ul class="pagination pagination-space-between list-unstyled">
    <li class="page-item previous"><a href="javascript:void(0);" class="page-link"><span>«</span> Prev</a></li>
    <li class="page-item next"><a href="javascript:void(0);" class="page-link">Next <span>»</span></a></li>
</ul>