Bootstrap 3 Pagination

Create "Previous/Next" or "Next n" controls with Bootstrap's pagination classes.

Bootstrap's .pagination class does just that — provides pagination.

Pagination is typically where you have navigation that links to multiple pages within a series. For example, search results that return many pages will have pagination that enables the user to navigate to the next page or even jump forward several pages.

Default Pagination

To create default pagination, add class="pagination" to the <ul> element that represents the list of pages.

Active State for Current Page

Add class="active" to the <li> element that represents the current page (the page that the user is currently on).

Disabling an Option

Add class="disabled" to the <li> element to disable that option.

Pagination Size

Add either the .pagination-lg or .pagination-sm to the <ul> element to increase or decrease the size of the pagination controls.

<nav>
<ul class="pagination pagination-lg">
<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 class="active"><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

<nav>
<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 class="active"><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

<nav>
<ul class="pagination pagination-sm">
<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 class="active"><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

Pagers

Bootstrap's .pager class can be used for creating "Previous/Next" type links. Simply use class="pager" instead of class="pagination".

Alignment

Use class="previous" and class="next" against the <li> element to align the "Previous" button to the left and the "Next" button to the right.

Disabling an Option

Add Bootstrap's .disabled class to disable an option.