Mixed controls

Pagination
Breadcrumbs

Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.


<div class="text-center">
  <ul class="pagination">
    <li>
      <a href="#" class="previous">
        <i class="fa fa-angle-left"></i>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="active"><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" class="next">
        <i class="fa fa-angle-right"></i>
      </a>
    </li>
  </ul>
</div>

<ul class="pager">
  <li class="previous"><a href="#">Prev</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

Breadcrumbs

Indicate the current page's location within a navigational hierarchy.


<ol class="breadcrumb">
  <li class="active">Home</li>
</ol>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li class="active">Library</li>
</ol>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>