Pagination

Default

Simple
Icon
Disabled & Active
1
<!-- Pagination -->
2
<nav aria-label="Page navigation example">
3
<ul class="pagination">
4
<li class="page-item"><a class="page-link" href="javascript:void(0)">Previous</a></li>
5
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
6
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
7
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
8
<li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
9
</ul>
10
</nav>
11
<!-- /pagination -->
Copied!
1
<!-- Pagination -->
2
<nav aria-label="Page navigation example">
3
<ul class="pagination">
4
<li class="page-item">
5
<a class="page-link" href="javascript:void(0)" aria-label="Previous">
6
<span aria-hidden="true"><i class="icon icon-chevrolet-left"></i></span>
7
<span class="sr-only">Previous</span>
8
</a>
9
</li>
10
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
11
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
12
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
13
<li class="page-item">
14
<a class="page-link" href="javascript:void(0)" aria-label="Next">
15
<span aria-hidden="true"><i class="icon icon-chevrolet-right"></i></span>
16
<span class="sr-only">Next</span>
17
</a>
18
</li>
19
</ul>
20
</nav>
21
<!-- /pagination --
Copied!
1
<!-- Pagination -->
2
<nav>
3
<ul class="pagination">
4
<li class="page-item disabled">
5
<a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
6
</li>
7
<li class="page-item">
8
<a class="page-link" href="javascript:void(0)">1</a>
9
</li>
10
<li class="page-item active">
11
<a class="page-link" href="javascript:void(0)">2 <span class="sr-only">(current)</span></a>
12
</li>
13
<li class="page-item">
14
<a class="page-link" href="javascript:void(0)">3</a>
15
</li>
16
<li class="page-item">
17
<a class="page-link" href="javascript:void(0)">Next</a>
18
</li>
19
</ul>
20
</nav>
21
<!-- /pagination -->
Copied!

Sizing

Large
Small
1
<!-- Pagination -->
2
<nav>
3
<ul class="pagination pagination-lg">
4
<li class="page-item disabled">
5
<a class="page-link" href="javascript:void(0)" tabindex="-1">1</a>
6
</li>
7
<li class="page-item">
8
<a class="page-link" href="javascript:void(0)">2</a>
9
</li>
10
<li class="page-item">
11
<a class="page-link" href="javascript:void(0)">3</a>
12
</li>
13
</ul>
14
</nav>
15
<!-- /pagination -->
Copied!
1
<!-- Pagination -->
2
<nav>
3
<ul class="pagination pagination-sm">
4
<li class="page-item disabled">
5
<a class="page-link" href="javascript:void(0)" tabindex="-1">1</a>
6
</li>
7
<li class="page-item">
8
<a class="page-link" href="javascript:void(0)">2</a>
9
</li>
10
<li class="page-item">
11
<a class="page-link" href="javascript:void(0)">3</a>
12
</li>
13
</ul>
14
</nav>
15
<!-- /pagination -->
Copied!

Alignment

Start
Center
End
1
<!-- Pagination -->
2
<nav aria-label="Page navigation example">
3
<ul class="pagination">
4
<li class="page-item"><a class="page-link" href="javascript:void(0)">Previous</a></li>
5
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
6
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
7
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
8
<li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
9
</ul>
10
</nav>
11
<!-- /pagination -->
Copied!
1
<!-- Pagination -->
2
<nav aria-label="Page navigation example">
3
<ul class="pagination justify-content-center">
4
<li class="page-item disabled"><a class="page-link" href="javascript:void(0)">Previous</a></li>
5
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
6
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
7
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
8
<li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
9
</ul>
10
</nav>
11
<!-- /pagination -->
Copied!
1
<!-- Pagination -->
2
<nav aria-label="Page navigation example">
3
<ul class="pagination justify-content-end">
4
<li class="page-item disabled"><a class="page-link" href="javascript:void(0)">Previous</a></li>
5
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
6
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
7
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
8
<li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
9
</ul>
10
</nav>
11
<!-- /pagination -->
Copied!
Last modified 1yr ago
Copy link