brand brand
Apps
Pages
Documentation
Quickly Build Applications

Exclusively for webapps Based on Bootstrap

Go Appster

Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Basic example

Use default Bootstrap markup to display Pagination elements. See the Bootstrap documentation to change alignments & sizes.

														
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<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 active"><a class="page-link" href="#">3</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
<nav class="pagination-wrap d-inline-block" aria-label="...">
	<ul class="pagination">
		<li class="page-item disabled">
			<span class="page-link">Previous</span>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item active">
			<span class="page-link">
		2
		<span class="sr-only">(current)</span>
			</span>
		</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 class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination">
		<li class="page-item">
			<a class="page-link" href="#" aria-label="Previous">
				<span aria-hidden="true">&laquo;</span>
				<span class="sr-only">Previous</span>
			</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="#" aria-label="Next">
				<span aria-hidden="true">&raquo;</span>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</nav>
Custom pagination

Create fancy pagination using .custom-pagination modifier class.

														
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination custom-pagination">
		<li class="page-item"><a class="page-link" href="#">Previous</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="#">...</a></li>
		<li class="page-item"><a class="page-link" href="#">15</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
Rounded pagination

Use the .pagination-rounded modifier class to make custom pagination more rounded.

														
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination custom-pagination pagination-rounded">
		<li class="page-item"><a class="page-link" href="#">Previous</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="#">...</a></li>
		<li class="page-item"><a class="page-link" href="#">15</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
Filled pagination

Use the .pagination-filled modifier class to make filled pagination. 

														
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination custom-pagination pagination-filled">
		<li class="page-item"><a class="page-link" href="#">Previous</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="#">...</a></li>
		<li class="page-item"><a class="page-link" href="#">15</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination custom-pagination pagination-rounded pagination-filled">
		<li class="page-item"><a class="page-link" href="#">Previous</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="#">...</a></li>
		<li class="page-item"><a class="page-link" href="#">15</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
Simple pagination

Fancy minimal simple style pagination? Create using .pagination-simple modifier class.

														
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination custom-pagination pagination-simple">
		<li class="page-item"><a class="page-link" href="#">Previous</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="#">...</a></li>
		<li class="page-item"><a class="page-link" href="#">15</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination custom-pagination pagination-rounded pagination-simple">
		<li class="page-item"><a class="page-link" href="#">Previous</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="#">...</a></li>
		<li class="page-item"><a class="page-link" href="#">15</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
Working 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 and the .sr-only utility. 

														
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination custom-pagination pagination-filled">
		<li class="page-item"><a class="page-link" href="#"><i class="ri-arrow-left-s-line"></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="#">...</a></li>
		<li class="page-item"><a class="page-link" href="#">15</a></li>
		<li class="page-item"><a class="page-link" href="#"><i class="ri-arrow-right-s-line"></i></a></li>
	</ul>
</nav>
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination custom-pagination pagination-rounded pagination-filled">
		<li class="page-item"><a class="page-link" href="#"><i class="ri-arrow-left-s-line"></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="#">...</a></li>
		<li class="page-item"><a class="page-link" href="#">15</a></li>
		<li class="page-item"><a class="page-link" href="#"><i class="ri-arrow-right-s-line"></i></a></li>
	</ul>
</nav>
Alignment

Use justify-content utility classes to align pagination - center, right & full justified.

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

Use default Bootstrap markup to display Pagination elements. See the Bootstrap documentation to change alignments & sizes.

														
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination pagination-sm">
		<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 active"><a class="page-link" href="#">3</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
<nav class="pagination-wrap d-inline-block" aria-label="...">
	<ul class="pagination pagination-sm">
		<li class="page-item disabled">
			<span class="page-link">Previous</span>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item active">
			<span class="page-link">
				2<span class="sr-only">(current)</span>
			</span>
		</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 class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination pagination-sm">
		<li class="page-item">
			<a class="page-link" href="#" aria-label="Previous">
				<span aria-hidden="true">&laquo;</span>
				<span class="sr-only">Previous</span>
			</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="#" aria-label="Next">
				<span aria-hidden="true">&raquo;</span>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</nav>
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination pagination-sm custom-pagination">
		<li class="page-item"><a class="page-link" href="#">Previous</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="#">...</a></li>
		<li class="page-item"><a class="page-link" href="#">15</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
Jump to