Lexicon v1.0.32

Pagination

Pagination

Preset pagination styles helps divide up large blocks of content on your site or app. Use class ellipsis or dropdown on a pagination list item to separate pagination controls from page numbers.

<ul class="pagination">
    <li class="disabled"><a href="#1"><span aria-hidden="true" class="icon-caret-left"></span></a></li>
    <li class="disabled"><a href="#1"><span aria-hidden="true" class="icon-double-angle-left"></span></a></li>
    <li class="active"><a href="#1">1</a></li>
    <li><a href="#1">2</a></li>
    <li><a href="#1">3</a></li>
    <li><a href="#1">4</a></li>
    <li><a href="#1">5</a></li>
    <li><a href="#1">6</a></li>
    <li><a href="#1">7</a></li>
    <li><a href="#1">8</a></li>
    <li><a href="#1">9</a></li>
    <li><a href="#1">10</a></li>
    <li class="ellipsis"><a href="#1">...</a></li>
    <li><a href="#1">16</a></li>
    <li><a href="#1"><span aria-hidden="true" class="icon-double-angle-right"></span></a></li>
    <li><a href="#1"><span aria-hidden="true" class="icon-caret-right"></span></a></li>
</ul>

Pagination Bar

Use pagination-bar's preset styles to give your users more control over the content being displayed on the page.

10 entries
Showing 1 to 20 of 203 entries.
<div class="dropdown pagination-items-per-page">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#1">10 entries <span aria-hidden="true" class="icon-sort"></span></a>
    <ul class="dropdown-menu">
        <li><a href="#1">5</a></li>
        <li><a href="#1">10</a></li>
        <li><a href="#1">20</a></li>
        <li><a href="#1">30</a></li>
        <li><a href="#1">50</a></li>
    </ul>
</div>

<div class="pagination-results">Showing 1 to 20 of 203 entries.</div>

<ul class="pagination">
    <li class="disabled"><a href="#1"><span aria-hidden="true" class="icon-caret-left"></span></a></li>
    <li class="active"><a href="#1">1</a></li>
    <li><a href="#1">2</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#1">...</a>
        <div class="dropdown-menu dropdown-menu-top-center">
            <ul class="inline-scroller link-list">
                <li><a href="#1">3</a></li>
                <li><a href="#1">4</a></li>
                <li><a href="#1">5</a></li>
                <li><a href="#1">6</a></li>
                <li><a href="#1">7</a></li>
                <li><a href="#1">8</a></li>
                <li><a href="#1">9</a></li>
                <li><a href="#1">10</a></li>
                <li><a href="#1">11</a></li>
                <li><a href="#1">12</a></li>
                <li><a href="#1">13</a></li>
                <li><a href="#1">14</a></li>
                <li><a href="#1">15</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#1">16</a></li>
    <li><a href="#1"><span aria-hidden="true" class="icon-caret-right"></span></a></li>
</ul>