# Pagination

## Tables/pages

![Pagination beneath a table.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoPMsV6ejUj2DeUpDp%2F-LZoPOEAHdVgAJBXs9-q%2Fpagination_table.PNG?generation=1551362529065348\&alt=media)

```markup
<div class="table-footer">
    <ul class="pagination">
        <li><a href="#" title="First"><i class="fas fa-angle-left"></i></a></li>
        <li><a href="#" title="Previous"><i class="fas fa-angle-double-left"></i></a></li>
        <li class="pagination-select">Page <select class="paging-select"><option>1</option> ... </select> of 5</li>
        <li><a href="#" title="Next"><i class="fas fa-angle-double-right"></i></a></li>
        <li><a href="#" title="Last"><i class="fas fa-angle-right"></i></a></li>
    </ul>
</div>
```

## Panels

![Pagination in a panel.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoPMsV6ejUj2DeUpDp%2F-LZoPOEDFM3jTgU4Fiwk%2Fpagination_panels.PNG?generation=1551362528938244\&alt=media)

```markup
<!--Between panel-heading and panel-body-->
<ul class="panel-pagination">
    <li>
        <a href="#" title="First"><i class="fas fa-angle-left"></i></a>
        <a href="#" title="Previous"><i class="fas fa-angle-double-left"></i></a>
    </li>
    <li class="pagination-select">Page <select class="paging-select"><option>1</option> ... </select> of 5</li>
    <li>
        <a href="#" title="Next"><i class="fas fa-angle-double-right"></i></a>
        <a href="#" title="Last"><i class="fas fa-angle-right"></i></a>
    </li>
</ul>
```