Disable Preloader

### Pagination

### Paginations

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

    <nav>
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>

#### Disabled and active states

    <nav>
      <ul class="pagination">
        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
        ...
      </ul>
    </nav>

You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.

    <nav>
      <ul class="pagination">
        <li class="disabled">
          <span>
            <span aria-hidden="true">&laquo;</span>
          </span>
        </li>
        <li class="active">
          <span>1 <span class="sr-only">(current)</span></span>
        </li>
        ...
      </ul>
    </nav>

#### Sizing

Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.

    <nav><ul class="pagination pagination-lg">...</ul></nav>
    <nav><ul class="pagination">...</ul></nav>
    <nav><ul class="pagination pagination-sm">...</ul></nav>

### Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

    <nav>
      <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
      </ul>
    </nav>

#### Aligned links

Alternatively, you can align each link to the sides:

    <nav>
      <ul class="pager">
        <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
      </ul>
    </nav>

#### Optional disabled state

Pager links also use the general `.disabled` utility class from the pagination.

    <nav>
      <ul class="pager">
        <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
      </ul>
    </nav>

### Paginations Theme Colored

    <nav>
      <ul class="pagination theme-colored">
        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
        ...
      </ul>
    </nav>

### Pager Theme Colored

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

    <nav>
      <ul class="pager theme-colored">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
      </ul>
    </nav>

### Paginations Dark

    <nav>
      <ul class="pagination dark">
        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
        ...
      </ul>
    </nav>

### Pager Dark

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

    <nav>
      <ul class="pager dark">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
      </ul>
    </nav>