Pagination | DashLite Admin Template

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.

- Prev
- 1
- 2
- 6
- 7
- Next

###### 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>

##### Select Your Country

- Argentina
- Australia
- Bangladesh
- Canada (English)
- Centrafricaine
- China
- France
- Germany
- Iran
- Italy
- México
- Philippines
- Portugal
- South Africa
- Spain
- Switzerland
- United Kingdom
- United State