Pagination

Default

Simple
Icon
Disabled & Active
Simple
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="javascript:void(0)">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
</ul>
</nav>
<!-- /pagination -->
Icon
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="javascript:void(0)" aria-label="Previous">
<span aria-hidden="true"><i class="icon icon-chevrolet-left"></i></span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item">
<a class="page-link" href="javascript:void(0)" aria-label="Next">
<span aria-hidden="true"><i class="icon icon-chevrolet-right"></i></span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!-- /pagination --
Disabled & Active
<!-- Pagination -->
<nav>
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0)">1</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0)">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0)">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0)">Next</a>
</li>
</ul>
</nav>
<!-- /pagination -->

Sizing

Large
Small
Large
<!-- Pagination -->
<nav>
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="javascript:void(0)" tabindex="-1">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0)">2</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0)">3</a>
</li>
</ul>
</nav>
<!-- /pagination -->
Small
<!-- Pagination -->
<nav>
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="javascript:void(0)" tabindex="-1">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0)">2</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0)">3</a>
</li>
</ul>
</nav>
<!-- /pagination -->

Alignment

Start
Center
End
Start
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="javascript:void(0)">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
</ul>
</nav>
<!-- /pagination -->
Center
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled"><a class="page-link" href="javascript:void(0)">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
</ul>
</nav>
<!-- /pagination -->
End
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled"><a class="page-link" href="javascript:void(0)">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
</ul>
</nav>
<!-- /pagination -->