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.
- <div class="pagination">
- <ul>
- <li><a href="#">Prev</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="#">Next</a></li>
- </ul>
- </div>
Links are customizable for different circumstances. Use .disabled
for unclickable links and .active
to indicate the current page.
- <div class="pagination">
- <ul>
- <li class="disabled"><a href="#">Prev</a></li>
- <li class="active"><a href="#">1</a></li>
- ...
- </ul>
- </div>
You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.
- <div class="pagination">
- <ul>
- <li class="disabled"><span>Prev</span></li>
- <li class="active"><span>1</span></li>
- ...
- </ul>
- </div>
Fancy larger or smaller pagination? Add .pagination-large
, .pagination-small
, or .pagination-mini
for additional sizes.
- <div class="pagination pagination-large">
- <ul>
- ...
- </ul>
- </div>
- <div class="pagination">
- <ul>
- ...
- </ul>
- </div>
- <div class="pagination pagination-small">
- <ul>
- ...
- </ul>
- </div>
- <div class="pagination pagination-mini">
- <ul>
- ...
- </ul>
- </div>
Add one of two optional classes to change the alignment of pagination links: .pagination-centered
and .pagination-right
.
- <div class="pagination pagination-centered">
- ...
- </div>
- <div class="pagination pagination-right">
- ...
- </div>
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
By default, the pager centers links.
- <ul class="pager">
- <li><a href="#">Previous</a></li>
- <li><a href="#">Next</a></li>
- </ul>
Alternatively, you can align each link to the sides:
- <ul class="pager">
- <li class="previous">
- <a href="#">← Older</a>
- </li>
- <li class="next">
- <a href="#">Newer →</a>
- </li>
- </ul>
Pager links also use the general .disabled
utility class from the pagination.
- <ul class="pager">
- <li class="previous disabled">
- <a href="#">← Older</a>
- </li>
- ...
- </ul>