patternfly/tests/pages/_includes/widgets/navigation/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.

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