Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • Patrick H. Lauke's avatar
    Skip link workarounds for Chrome and IE · c0892d14
    Patrick H. Lauke authored 
    Add tabindex="-1" to main #content to work around bug in Chrome (and old
WebKits) and IE
Update advice in accessibility section
Include patch in docs CSS to suppress outline when #content is focused
(particularly as Chrome sets focus as result of mouse click for
tabindex="-1" elements)
    c0892d14
pagination.md 4.21 KiB 
layout: page
title: Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Default pagination

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 %}

Disabled and active states

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)
{% endhighlight %}

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

{% example html %}

{% endexample %}

{% example html %}

{% endexample %}

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

Default example

By default, the pager centers links.

{% example html %}

{% endexample %}

Aligned links

Alternatively, you can align each link to the sides:

{% example html %}

{% endexample %}

Optional disabled state

Pager links also use the .disabled class.

{% highlight html %}

{% endhighlight %}