Bootstrap - Pagination

In this tutorial we will learn about pagination in Bootstrap.

We use the pagination to navigate the website page wise.

Default pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

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

Output

Active state

We use the .active class to represent the active state.

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

Output

Disabled state

We use the .disabled class to make a pagination link disabled.

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

Output

Sizing

We can add the following classes .pagination-lg and .pagination-sm to change the size of the pagination buttons

<!-- large size -->
<nav aria-label="Page navigation">
  <ul class="pagination pagination-lg">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>

<!-- default size -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>

<!-- small size -->
<nav aria-label="Page navigation">
  <ul class="pagination pagination-sm">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>

Output

Pager

We use this to create previous and next button pagination.

<nav aria-label="Page navigation">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Output

Pager alignment

We can align the pager previous and next button.

<nav aria-label="Page navigation">
  <ul class="pager">
    <li class="previous">
      <a href="#"><span aria-hidden="true">&larr;</span> Prev</a>
    </li>
    <li class="next">
      <a href="#">Next <span aria-hidden="true">&rarr;</span></a>
    </li>
  </ul>
</nav>

Output

To disable a pager button we can simply add the .disabled class.

<nav aria-label="Page navigation">
  <ul class="pager">
    <li class="previous disabled">
      <a href="#"><span aria-hidden="true">&larr;</span> Prev</a>
    </li>
    <li class="next">
      <a href="#">Next <span aria-hidden="true">&rarr;</span></a>
    </li>
  </ul>
</nav>