Pagination

  1. Elements
  2. Pagination
Basic Pagination

Below are basic pagination navigation.

<nav>
	<ul class="pagination">
		<li class="page-item"><a class="page-link" href="#">Previous</a></li>
		<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="#">Next</a></li>
	</ul>
</nav>
Pagination with Icons

Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes.

<nav>
	<ul class="pagination">
		<li class="page-item">
			<a class="page-link" href="#" aria-label="Previous">
				<span aria-hidden="true">&laquo;</span>
			</a>
		</li>
		<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="#" aria-label="Next">
				<span aria-hidden="true">&raquo;</span>
			</a>
		</li>
	</ul>
</nav>
Disabled and active Pagination

Pagination links are customizable for different circumstances.

<nav>
	<ul class="pagination">
		<li class="page-item disabled">
		  <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item active" aria-current="page">
		  <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
		</li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item">
		  <a class="page-link" href="#">Next</a>
		</li>
	</ul>
</nav>
Pagination Sizes

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

<div class="row row-sm">
	<div class="col-sm-6 col-md-6">
		<nav>
			<ul class="pagination pagination-lg">
				<li class="page-item active" aria-current="page">
					<span class="page-link">1</span>
				</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>
			</ul>
		</nav>
	</div>
	<div class="col-sm-6 col-md-6 mg-t-10 mg-sm-t-0">
		<nav>
			<ul class="pagination pagination-sm">
				<li class="page-item active" aria-current="page">
				  <span class="page-link">1</span>
				</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>
			</ul>
		</nav>
	</div>
</div>
Alignment Pagination

Change the alignment of pagination components.

<nav aria-label="Page navigation example">
	<ul class="pagination">
		<li class="page-item disabled">
			<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
		</li>
		<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="#">Next</a>
		</li>
	</ul>
</nav>
<nav aria-label="Page navigation example">
	<ul class="pagination justify-content-center">
		<li class="page-item disabled">
			<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
		</li>
		<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="#">Next</a>
		</li>
	</ul>
</nav>
<nav aria-label="Page navigation example">
	<ul class="pagination justify-content-end">
		<li class="page-item disabled">
			<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
		</li>
		<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="#">Next</a>
		</li>
	</ul>
</nav>
Circled Pagination

Below are basic pagination navigation in circle.

<ul class="pagination pagination-circled">
	<li class="page-item">
		<a class="page-link" href="#"><i class="icon ion-ios-arrow-back"></i></a>
	</li>
	<li class="page-item active">
		<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="#"><i class="icon ion-ios-arrow-forward"></i></a>
	</li>
</ul>
Circled Pagination Style2

Below are basic pagination navigation in circle.

<div class="row row-sm">
	<ul class="pagination pagination-circle mb-0 ms-xl-3">
		<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a></li>
		<li class="page-item active"><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="#"><i class="fas fa-angle-double-right"></i></a></li>
	</ul>
</div>
Radius Pagination

Below are basic pagination navigation in border-radius.

<div class="row row-sm">
	<ul class="pagination pagination-radius mb-0 ms-lg-3">
		<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a></li>
		<li class="page-item active"><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="#"><i class="fas fa-angle-double-right"></i></a></li>
	</ul>
</div>
avatar
Joyce Chua

App Developer