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:
To create a basic pagination, add the .pagination class to an <ul> element:
Example
<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:
Add class .active to let the user know which page he/she is on:
Example
<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:
Add class .disabled if a link for some reason is disabled:
Example
<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:
Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:
Example
<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>
Complete Bootstrap Navigation Reference
For a complete reference of all navigation classes, go to our complete
Bootstrap Navigation Reference.
Color Picker
