patternfly/tests/pages/pagination.html

This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

---
categories: [Widgets]
layout: page
title: Pagination
resource: true
url-js-extra: [ '//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js']

---
      <h2>Pager - default size</h2>
      <ul class="pager">
        <li class="previous">
          <a href="#">
            <span class="i fa fa-angle-left"></span>
            Previous
          </a>
        </li>
        <li class="next">
          <a href="#">
            Next
            <span class="i fa fa-angle-right"></span>
          </a>
        </li>
      </ul>
      <ul class="pager">
        <li class="previous disabled">
          <a href="#">
            <span class="i fa fa-angle-left"></span>
            Previous
          </a>
        </li>
        <li class="next disabled">
          <a href="#">
            Next
            <span class="i fa fa-angle-right"></span>
          </a>
        </li>
      </ul>
      <hr>
      <h2>Pager - mini size</h2>
      <ul class="pager pager-sm">
        <li class="previous">
          <a href="#">
            <span class="i fa fa-angle-left"></span>
            Previous
          </a>
        </li>
        <li class="next">
          <a href="#">
            Next
            <span class="i fa fa-angle-right"></span>
          </a>
        </li>
      </ul>
      <ul class="pager pager-sm">
        <li class="previous disabled">
          <a href="#">
            <span class="i fa fa-angle-left"></span>
            Previous
          </a>
        </li>
        <li class="next disabled">
          <a href="#">
            Next
            <span class="i fa fa-angle-right"></span>
          </a>
        </li>
      </ul>
      <hr>
      <h2>Pagination - default size</h2>
      <ul class="pagination">
        <li>
          <a href="#">
            <span class="i fa fa-angle-left"></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="#">
            <span class="i fa fa-angle-right"></span>
          </a>
        </li>
      </ul>
      <ul class="pagination">
        <li class="disabled">
          <span>
            <span class="i fa fa-angle-left"></span>
          </span>
        </li>
        <li class="active">
          <span>
            1
            <span class="sr-only">(current)</span>
          </span>
        </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="#">
            <span class="i fa fa-angle-right"></span>
          </a>
        </li>
      </ul>
      <ul class="pagination">
        <li class="disabled">
          <span>
            <span class="i fa fa-angle-left"></span>
          </span>
        </li>
        <li class="disabled">
          <span>
            1
            <span class="sr-only">(current)</span>
          </span>
        </li>
        <li class="disabled">
          <a href="#">2</a>
        </li>
        <li class="disabled">
          <a href="#">3</a>
        </li>
        <li class="disabled">
          <a href="#">4</a>
        </li>
        <li class="disabled">
          <a href="#">5</a>
        </li>
        <li class="disabled">
          <a href="#">
            <span class="i fa fa-angle-right"></span>
          </a>
        </li>
      </ul>
      <hr>
      <h2>Pagination - mini size</h2>
      <ul class="pagination pagination-sm">
        <li>
          <a href="#">
            <span class="i fa fa-angle-left"></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="#">
            <span class="i fa fa-angle-right"></span>
          </a>
        </li>
      </ul>
      <ul class="pagination pagination-sm">
        <li class="disabled">
          <span>
            <span class="i fa fa-angle-left"></span>
          </span>
        </li>
        <li class="active">
          <span>
            1
            <span class="sr-only">(current)</span>
          </span>
        </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="#">
            <span class="i fa fa-angle-right"></span>
          </a>
        </li>
      </ul>
      <ul class="pagination pagination-sm">
        <li class="disabled">
          <span>
            <span class="i fa fa-angle-left"></span>
          </span>
        </li>
        <li class="disabled">
          <span>
            1
            <span class="sr-only">(current)</span>
          </span>
        </li>
        <li class="disabled">
          <a href="#">2</a>
        </li>
        <li class="disabled">
          <a href="#">3</a>
        </li>
        <li class="disabled">
          <a href="#">4</a>
        </li>
        <li class="disabled">
          <a href="#">5</a>
        </li>
        <li class="disabled">
          <a href="#">
            <span class="i fa fa-angle-right"></span>
          </a>
        </li>
      </ul>
      <hr>
      <h2>Pagination row for card, list, and table views</h2>
      <p>The following control can be seen in these examples:</p>
      <ul>
        <li><a href="pagination-card-view.html">Card View</a></li>
        <li><a href="pagination-list-view.html">List View</a></li>
        <li><a href="pagination-table-view.html">Table View</a></li>
      </ul>
      {% include widgets/pagination/pagination.html %}