Bootstrap Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Torus Kit new features for Pagination
Style variations Torus Kit arrows Grouping

Examples

Example of Bootstrap .pagination component enhanced by Torus Kit features such as gap between items, flush style (border-less) and circle styled pagination items.

Overview

We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".

Basic Example

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>
Pro

Style variations

Torus Kit brings more control over the .pagination styling, so you are not limited to only default Bootstrap style, nor you don’t need to style it with CSS.

Gap between items

Create more spacey pagination by adding .pagination-gap class to a .pagination. This will add a small gap between each pagination item.

<nav aria-label="Page navigation example">
  <ul class="pagination pagination-gap">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Flush

Border-less style can be done by adding .pagination-flush class to a .pagination.

<nav aria-label="Page navigation example">
  <ul class="pagination pagination-flush">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Circle pagination

By using Torus Kit’s Shapes component you can create a circle-styled navigation. Just add a .circle .circle-{size} to .page-link class and wrap the page number into a <span> tag.

Here’s a comparing of Torus Kit .circle component with a Bootstrap’s .rounded-circle. The last mentioned just adds a border-radius only and if the content is longer than shape, it gets more oval look. Torus Kit’s .circle component create nice circle shape regardless the content length.

<!-- Custom shape .circle class -->
<nav aria-label="Page navigation example">
  <ul class="pagination pagination-flush">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link circle circle-md" href="#"><span>1</span></a></li>
    <li class="page-item"><a class="page-link circle circle-md" href="#"><span>2</span></a></li>
    <li class="page-item disabled"><a class="page-link circle circle-md" href="#"><span>...</span></a></li>
    <li class="page-item active"><a class="page-link circle circle-md" href="#"><span>28</span></a></li>
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Next</a></li>
  </ul>
</nav>

<!-- .rounded-circle class -->
<nav aria-label="Page navigation example">
  <ul class="pagination pagination-flush">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link rounded-circle" href="#">1</a></li>
    <li class="page-item"><a class="page-link rounded-circle" href="#">2</a></li>
    <li class="page-item disabled"><a class="page-link rounded-circle" href="#">...</a></li>
    <li class="page-item active"><a class="page-link rounded-circle" href="#">28</a></li>
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Next</a></li>
  </ul>
</nav>

Working with icons

Using navigation icons helps user to quickly navigate through pages. Be sure to provide proper screen reader support with aria attributes.

Pro

Torus Kit arrows

Included Torus Kit font provides left and right arrow icons that can be used as navigation. Use .tk-icon-arrow-left and .tk-icon-arrow-right.

<nav aria-label="Page navigation example">
  <ul class="pagination pagination-gap">

    <li class="page-item">
        <a class="page-link" href="#" aria-label="Previous">
            <i class="tk-icon-arrow-left"></i>
        </a>
    </li>

    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>

    <li class="page-item">
        <a class="page-link" href="#" aria-label="Next">
            <i class="tk-icon-arrow-right"></i>
        </a>
    </li>

  </ul>
</nav>

Bootstrap default

Looking to use an icon or symbol in place of text for some pagination links? Use some HTML entity for this purpose.

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Disabled and active states

Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.

While the .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add tabindex="-1" on disabled links and use custom JavaScript to fully disable their functionality.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Sizing

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

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        1
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        1
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>
Pro

Grouping

With Bootstrap’s .mr-auto and .ml-auto Spacing utilities you can create a group of page navigation items without breaking the <li> hierarchy. To achieve better visual style use Torus Kit’s .pagination-gap or .pagination-flush.

This example create group of page numbers in the center and navigation arrows on the sides.

<nav aria-label="Page navigation example">
  <ul class="pagination pagination-gap">

    <li class="page-item mr-auto">
        <a class="page-link" href="#" aria-label="Previous">
            <i class="tk-icon-arrow-left"></i>
        </a>
    </li>

    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>

    <li class="page-item ml-auto">
        <a class="page-link" href="#" aria-label="Next">
            <i class="tk-icon-arrow-right"></i>
        </a>
    </li>

  </ul>
</nav>

You can also place the group of page numbers on the one side and navigation arrows on the opposite.

<nav aria-label="Page navigation example">
  <ul class="pagination pagination-gap">

    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>

    <li class="page-item ml-auto">
        <a class="page-link" href="#" aria-label="Previous">
            <i class="tk-icon-arrow-left"></i>
        </a>
    </li>
    <li class="page-item">
        <a class="page-link" href="#" aria-label="Next">
            <i class="tk-icon-arrow-right"></i>
        </a>
    </li>

  </ul>
</nav>

Alignment

Change the alignment of pagination components with flexbox utilities.

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>