Pagination

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

Examples

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <i class="fa fa-angle-left"></i>
        <span class="sr-only">Previous</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">
        <i class="fa fa-angle-right"></i>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Colors

  <ul class="pagination pagination-primary">
    <li class="page-item active">
      <a class="page-link" href="javascript:;">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#link">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#link">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#link">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#link">5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#link">6</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#link">7</a>
    </li>
  </ul>
  <ul class="pagination pagination-info">
    <li class="page-item">
      <a class="page-link" href="#link" aria-label="Previous">
        <span aria-hidden="true"><i class="ni ni-bold-left" aria-hidden="true"></i></span>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#link">1</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#link">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#link">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#link">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#link">5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#link" aria-label="Next">
        <span aria-hidden="true"><i class="ni ni-bold-right" aria-hidden="true"></i></span>
      </a>
    </li>
  </ul>
  <div class="pagination-container justify-content-center">
    <ul class="pagination pagination-success">
      <li class="page-item">
        <a class="page-link" href="javascript:;" aria-label="Previous">
          <span aria-hidden="true"><i class="fa fa-angle-double-left" aria-hidden="true"></i></span>
        </a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">1</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">2</a>
      </li>
      <li class="page-item active">
        <a class="page-link" href="javascript:;">3</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">4</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">5</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;" aria-label="Next">
          <span aria-hidden="true"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
        </a>
      </li>
    </ul>
  </div>
  <div class="pagination-container justify-content-center">
    <ul class="pagination pagination-warning">
      <li class="page-item">
        <a class="page-link" href="javascript:;" aria-label="Previous">
          <span aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
        </a>
      </li>
      <li class="page-item active">
        <a class="page-link" href="javascript:;">1</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">2</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">3</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">4</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">5</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;" aria-label="Next">
          <span aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
        </a>
      </li>
    </ul>
  </div>
  <div class="pagination-container justify-content-center">
    <ul class="pagination pagination-danger">
      <li class="page-item">
        <a class="page-link" href="javascript:;" aria-label="Previous">
          <span aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
        </a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">1</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">2</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">3</a>
      </li>
      <li class="page-item active">
        <a class="page-link" href="javascript:;">4</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">5</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;" aria-label="Next">
          <span aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
        </a>
      </li>
    </ul>
  </div>
  <div class="pagination-container justify-content-center">
    <ul class="pagination pagination-secondary">
      <li class="page-item">
        <a class="page-link" href="javascript:;" aria-label="Previous">
          <span aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
        </a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">1</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">2</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">3</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">4</a>
      </li>
      <li class="page-item active">
        <a class="page-link" href="javascript:;">5</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;" aria-label="Next">
          <span aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
        </a>
      </li>
    </ul>
  </div>
  <div class="pagination-container justify-content-center">
    <ul class="pagination pagination-default">
      <li class="page-item">
        <a class="page-link" href="javascript:;" aria-label="Previous">
          <span aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
        </a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">1</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">2</a>
      </li>
      <li class="page-item active">
        <a class="page-link" href="javascript:;">3</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">4</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;">5</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:;" aria-label="Next">
          <span aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
        </a>
      </li>
    </ul>
</div>

Disabled and active states

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">
        <i class="fa fa-angle-left"></i>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <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="#">
        <i class="fa fa-angle-right"></i>
        <span class="sr-only">Next</span>
      </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 disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item active"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item active"><a class="page-link" href="#">3</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">
        <i class="fa fa-angle-left"></i>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><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="#">
        <i class="fa fa-angle-right"></i>
        <span class="sr-only">Next</span>
      </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">
        <i class="fa fa-angle-left"></i>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><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="#">
        <i class="fa fa-angle-right"></i>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>