logo logo-dark

Do you know the latest update of 2022? A overview of our is now available on YouTube

Components

Pagination

Examples for showing pagination to indicate a series of related content exists across multiple pages.

Basic Examples

The following example of basic pagination. Use .pagination class as parent <ul> and .page-link class of <a> element.

Code Example
<div>
<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Prev</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><span class="page-link"><em class="icon ni ni-more-h"></em></span></li>
    <li class="page-item"><a class="page-link" href="#">6</a></li>
    <li class="page-item"><a class="page-link" href="#">7</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>

Working with Icons

Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes.

Code Example
<nav>
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Prev"><span aria-hidden="true">&laquo;</span></a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
        </li>
    </ul>
</nav>

Disabled and Active States

Use .disabled for links that appear un-clickable and .active to indicate the current page.

Code Example
<nav>
    <ul class="pagination">
        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active" aria-current="page"><a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>

Sizing

Add .pagination-{sm|lg|xl} with .pagination main class for additional sizes.

Code Example
<nav>
    <ul class="pagination pagination-lg">
      <li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
    </ul>
</nav>

Alignment

Change the alignment of pagination components with flexbox utilities as use .justify-content-{start|center|end} to set alignment.

Code Example
<nav>
    <ul class="pagination justify-content-center">
        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>
© 2023 DashLite. Template by Softnio