pagination.md 5.18 KB
Newer Older
Mark Otto's avatar
Mark Otto committed
1
---
Mark Otto's avatar
Mark Otto committed
2
layout: docs
Mark Otto's avatar
Mark Otto committed
3
title: Pagination
4
group: components
Mark Otto's avatar
Mark Otto committed
5
6
---

7
Provide pagination links for your site or app with the multi-page pagination component, or the simpler [pager alternative](#pager).
Mark Otto's avatar
Mark Otto committed
8

Mark Otto's avatar
Mark Otto committed
9
10
11
12
13
## Contents

* Will be replaced with the ToC, excluding the "Contents" header
{:toc}

Mark Otto's avatar
Mark Otto committed
14
15
16
17
18
## 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 %}
Mark Otto's avatar
Mark Otto committed
19
20
<nav>
  <ul class="pagination">
Chris Rebert's avatar
Chris Rebert committed
21
    <li class="page-item">
Chris Rebert's avatar
Chris Rebert committed
22
      <a class="page-link" href="#" aria-label="Previous">
Mark Otto's avatar
Mark Otto committed
23
24
25
26
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
Chris Rebert's avatar
Chris Rebert committed
27
28
29
30
31
32
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
Chris Rebert's avatar
Chris Rebert committed
33
      <a class="page-link" href="#" aria-label="Next">
Mark Otto's avatar
Mark Otto committed
34
35
36
37
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
Mark Otto's avatar
Mark Otto committed
38
39
  </ul>
</nav>
Mark Otto's avatar
Mark Otto committed
40
{% endexample %}
Mark Otto's avatar
Mark Otto committed
41

Mark Otto's avatar
Mark Otto committed
42
43
44
45
46
### Disabled and active states

Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page.

{% example html %}
Mark Otto's avatar
Mark Otto committed
47
48
<nav>
  <ul class="pagination">
Chris Rebert's avatar
Chris Rebert committed
49
    <li class="page-item disabled">
Chris Rebert's avatar
Chris Rebert committed
50
      <a class="page-link" href="#" aria-label="Previous">
Mark Otto's avatar
Mark Otto committed
51
52
53
54
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
Chris Rebert's avatar
Chris Rebert committed
55
    <li class="page-item active">
Chris Rebert's avatar
Chris Rebert committed
56
      <a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
Mark Otto's avatar
Mark Otto committed
57
    </li>
Chris Rebert's avatar
Chris Rebert committed
58
59
60
61
62
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
Chris Rebert's avatar
Chris Rebert committed
63
      <a class="page-link" href="#" aria-label="Next">
Mark Otto's avatar
Mark Otto committed
64
65
66
67
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
Mark Otto's avatar
Mark Otto committed
68
69
  </ul>
</nav>
Mark Otto's avatar
Mark Otto committed
70
71
{% endexample %}

72
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.
Mark Otto's avatar
Mark Otto committed
73

74
{% example html %}
Mark Otto's avatar
Mark Otto committed
75
76
<nav>
  <ul class="pagination">
Chris Rebert's avatar
Chris Rebert committed
77
    <li class="page-item disabled">
Chris Rebert's avatar
Chris Rebert committed
78
      <span class="page-link" aria-label="Previous">
Mark Otto's avatar
Mark Otto committed
79
80
81
82
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </span>
    </li>
Chris Rebert's avatar
Chris Rebert committed
83
    <li class="page-item active"><span class="page-link">1 <span class="sr-only">(current)</span></span></li>
Mark Otto's avatar
Mark Otto committed
84
85
  </ul>
</nav>
86
{% endexample %}
Mark Otto's avatar
Mark Otto committed
87
88


Mark Otto's avatar
Mark Otto committed
89
90
91
92
93
### Sizing

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

{% example html %}
Mark Otto's avatar
Mark Otto committed
94
95
<nav>
  <ul class="pagination pagination-lg">
Chris Rebert's avatar
Chris Rebert committed
96
    <li class="page-item">
Chris Rebert's avatar
Chris Rebert committed
97
      <a class="page-link" href="#" aria-label="Previous">
Mark Otto's avatar
Mark Otto committed
98
99
100
101
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
Chris Rebert's avatar
Chris Rebert committed
102
103
104
105
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
Chris Rebert's avatar
Chris Rebert committed
106
      <a class="page-link" href="#" aria-label="Next">
Mark Otto's avatar
Mark Otto committed
107
108
109
110
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
Mark Otto's avatar
Mark Otto committed
111
112
  </ul>
</nav>
Mark Otto's avatar
Mark Otto committed
113
114
115
{% endexample %}

{% example html %}
Mark Otto's avatar
Mark Otto committed
116
117
<nav>
  <ul class="pagination pagination-sm">
Chris Rebert's avatar
Chris Rebert committed
118
    <li class="page-item">
Chris Rebert's avatar
Chris Rebert committed
119
      <a class="page-link" href="#" aria-label="Previous">
Mark Otto's avatar
Mark Otto committed
120
121
122
123
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
Chris Rebert's avatar
Chris Rebert committed
124
125
126
127
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
Chris Rebert's avatar
Chris Rebert committed
128
      <a class="page-link" href="#" aria-label="Next">
Mark Otto's avatar
Mark Otto committed
129
130
131
132
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
Mark Otto's avatar
Mark Otto committed
133
134
  </ul>
</nav>
Mark Otto's avatar
Mark Otto committed
135
{% endexample %}
Mark Otto's avatar
Mark Otto committed
136

Mark Otto's avatar
Mark Otto committed
137
## Pager
Mark Otto's avatar
Mark Otto committed
138

Mark Otto's avatar
Mark Otto committed
139
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
Mark Otto's avatar
Mark Otto committed
140

Mark Otto's avatar
Mark Otto committed
141
142
143
144
145
### Default example

By default, the pager centers links.

{% example html %}
Mark Otto's avatar
Mark Otto committed
146
147
148
149
150
151
<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>
Mark Otto's avatar
Mark Otto committed
152
{% endexample %}
Mark Otto's avatar
Mark Otto committed
153

Mark Otto's avatar
Mark Otto committed
154
155
156
157
158
### Aligned links

Alternatively, you can align each link to the sides:

{% example html %}
Mark Otto's avatar
Mark Otto committed
159
160
<nav>
  <ul class="pager">
161
162
    <li class="pager-prev"><a href="#">Older</a></li>
    <li class="pager-next"><a href="#">Newer</a></li>
Mark Otto's avatar
Mark Otto committed
163
164
  </ul>
</nav>
Mark Otto's avatar
Mark Otto committed
165
166
167
168
{% endexample %}


### Optional disabled state
Mark Otto's avatar
Mark Otto committed
169

Mark Otto's avatar
Mark Otto committed
170
Pager links also use the `.disabled` class.
Mark Otto's avatar
Mark Otto committed
171

172
{% example html %}
Mark Otto's avatar
Mark Otto committed
173
174
<nav>
  <ul class="pager">
175
176
    <li class="pager-prev disabled"><a href="#">Older</a></li>
    <li class="pager-next"><a href="#">Newer</a></li>
Mark Otto's avatar
Mark Otto committed
177
178
  </ul>
</nav>
179
{% endexample %}