Theme Configurator

Header Options
Navbar Options

Component Pagination

Basic Pagination

Flat Circle

Shaded Circle

Flat Rounded

Shaded Rounded

Flat Square

Shaded Square

<h3>Flat Circle</h3>
<nav aria-label="Page navigation">
    <ul class="pagination pagination-plain">
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </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 disabled"><a class="page-link" href="javascript:void(0)">4</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0)">5</a></li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

<h3>Shaded Circle</h3>
<nav aria-label="Page navigation">
    <ul class="pagination">
        ...
    </ul>
</nav>

<h3>Flat Rounded</h3>
<nav aria-label="Page navigation">
    <ul class="pagination pagination-round pagination-plain">
        ...
    </ul>
</nav>

<h3>Shaded Rounded</h3>
<nav aria-label="Page navigation">
    <ul class="pagination pagination-round">
        ...
    </ul>
</nav>

<h3>Flat Square</h3>
<nav aria-label="Page navigation">
    <ul class="pagination pagination-square pagination-plain">
        ...
    </ul>
</nav>

<h3>Shaded Square</h3>
<nav aria-label="Page navigation">
    <ul class="pagination pagination-square">
        ...
    </ul>
</nav>

All colors variations

<nav aria-label="Page navigation">
    <ul class="pagination pagination-success">
        ...
    </ul>
</nav>

Pager

<nav aria-label="...">
    <ul class="pager pager-flat d-flex justify-content-between">
        <li><a class="page-link" href="javascript:void(0)"><span aria-hidden="true">«</span> Previous</a></li>
        <li><a class="page-link" href="javascript:void(0)">Next <span aria-hidden="true">»</span></a></li>
    </ul>
</nav>


<nav aria-label="...">
    <ul class="pager d-flex justify-content-between">
        <li><a class="page-link" href="javascript:void(0)"><span aria-hidden="true">«</span> Previous</a></li>
        <li><a class="page-link" href="javascript:void(0)">Next <span aria-hidden="true">»</span></a></li>
    </ul>
</nav>

<nav aria-label="...">
    <ul class="pager pager-flat pager-info d-flex justify-content-between">
        <li><a class="page-link" href="javascript:void(0)"><span aria-hidden="true">«</span> Previous</a></li>
        <li><a class="page-link" href="javascript:void(0)">Next <span aria-hidden="true">»</span></a></li>
    </ul>
</nav>

Material Style

Social Links