Bootstrap Pagination

Bootstrap pagination component consists of button-like styled links, that are arranged side by side in a horizontal list. Pagination is built with list HTML elements so screen readers can announce the number of available links.

Learn how to create nice looking pagination using these Bootstrap pagination examples to indicate a series of related content exists across multiple pages and to navigate through pages easily.

Example

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="javascript:;" 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="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:;" 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">
          <svg width="14" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
          </svg>
        </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">
          <svg width="14" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path>
          </svg>
        </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="javascript:;" 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="javascript:;">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="javascript:;">2 <span class="sr-only">(current)</span></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:;">
        <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="javascript:;" tabindex="-1">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>
  </ul>
</nav>

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