Pagination

Pagination splits a long list of results across multiple numbered pages, letting a visitor jump to a specific page or step forward and back one page at a time. Bootstrap 3 builds this from a .pagination list, with modifier classes for the disabled and active page numbers and two sizing variants. We'll page through TrailMap's full trail-listing results.

The .pagination List

Pagination is an unordered list with the .pagination class, one <li> per page link.

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

Disabled and Active States

.active on an <li> marks the current page — it's still styled as a link visually but shows the visitor where they are. .disabled greys out an item that shouldn't be clickable, such as a "Previous" link on page 1.

<ul class="pagination">
  <li class="disabled"><a href="#">«</a></li>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">»</a></li>
</ul>
Note: .disabled only changes appearance and, on a real <button>, click behavior. On an <a> tag it's purely visual — the browser will still follow the href if it isn't removed or set to #, so pair it with server-side logic that doesn't render a real link on that page.

Sizing: .pagination-lg and .pagination-sm

Add .pagination-lg for a larger touch-friendly control, or .pagination-sm for a more compact one. Leave both off for the default size.

<ul class="pagination pagination-lg">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
</ul>

Worked Example: TrailMap, Page 2 of 8

A pagination control for TrailMap's trail-listing page, currently showing page 2 of 8 results pages, with the previous arrow enabled and a few numbered pages visible.

<ul class="pagination">
  <li><a href="#" aria-label="Previous">«</a></li>
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">…</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#" aria-label="Next">»</a></li>
</ul>
Next, learn the simpler two-button alternative to numbered pagination: the Pager.