Bootstrap Pager

What is Pager?

Pager is also a form of pagination (as described in the previous chapter).

Pager provides previous and next buttons (links).

To create previous/next buttons, add the .pager class to an <ul> element:

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Align Buttons

Use the .previous and .next classes to align each button to the sides of the page:

<ul class="pager">
  <li class="previous"><a href="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

Bootstrap Pagination

Basic Pagination

If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.

A basic pagination in Bootstrap looks like this:

• 1
• 2
• 3
• 4
• 5

To create a basic pagination, add the .pagination class to an <ul> element:

<ul class="pagination">
  <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>
</ul>

Active State

The active state shows what is the current page:

• 1
• 2
• 3
• 4
• 5

Add class .active to let the user know which page he/she is on:

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Disabled State

A disabled link cannot be clicked:

• 1
• 2
• 3
• 4
• 5

Add class .disabled if a link for some reason is disabled:

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Pagination Sizing

Pagination blocks can also be sized to a larger size or a smaller size:

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:

<ul class="pagination pagination-lg">
  <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>
</ul>

<ul class="pagination pagination-sm">
  <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>
</ul>