Paginations

  1. UI Elements
  2. Components
  3. Paginations

Basic Pagination

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><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>
<li><a href="#">»</a></li>
</ul>
 
<ul class="pager">
<li><a href="#">« Previous</a></li>
<li><a href="#">Next »</a></li>
</ul>

Line Pagination Style

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="pagination pagination-border">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><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>
<li><a href="#">»</a></li>
</ul>
 
<ul class="pager pager-border">
<li><a href="#">« Previous</a></li>
<li><a href="#">Next »</a></li>
</ul>

Different Sizes

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ul class="pagination pagination-sm">
...
</ul>
 
<ul class="pagination pagination">
...
</ul>
 
<ul class="pagination pagination-lg">
...
</ul>
 
<ul class="pagination pagination-border pagination-sm">
...
</ul>
 
<ul class="pagination pagination-border pagination">
...
</ul>
 
<ul class="pagination pagination-border pagination-lg">
...
</ul>

Navigation

Social Media