| layout | docs |
|---|---|
| title | Pagination |
| group | components |
Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.
- Will be replaced with the ToC, excluding the "Contents" header {:toc}
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.
{% example html %}
{% endexample %}Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.
{% example html %}
{% endexample %}You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the prev/next arrows, to remove click functionality while retaining intended styles.
{% highlight html %}
- « Previous
- 1 (current)
Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.
{% example html %}
{% endexample %}{% example html %}
{% endexample %}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.
{% example html %}
{% endexample %}Alternatively, you can align each link to the sides:
{% example html %}
{% endexample %}Pager links also use the .disabled class.
{% example html %}
{% endexample %}