Bootstrap - Pagination

Bootstrap

Share

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>