Components

<!-- 

	pagination : pill 
	add .pagination-pill. class to .pagination

-->



<!-- pagination : small -->
<nav aria-label="pagination">
	<ul class="pagination pagination-sm justify-content-center justify-content-md-start">

		<li class="page-item disabled">
			<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</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 bg-primary-soft" 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 : small -->


<!-- pagination : medium -->
<nav aria-label="pagination">
	<ul class="pagination justify-content-center justify-content-md-start">

		<li class="page-item disabled">
			<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</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 bg-primary-soft" 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 : medium -->


<!-- pagination : large -->
<nav aria-label="pagination">
	<ul class="pagination pagination-lg justify-content-center justify-content-md-start">

		<li class="page-item disabled">
			<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</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 bg-primary-soft" 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 : large -->
									

<!-- pagination : left -->
<nav aria-label="pagination">
	<ul class="pagination pagination-pill justify-content-center justify-content-md-start">

		<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 : left -->




<!-- pagination : center -->
<nav aria-label="pagination">
	<ul class="pagination pagination-pill 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 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 : center -->





<!-- pagination : right -->
<nav aria-label="pagination">
	<ul class="pagination pagination-pill justify-content-end justify-content-center justify-content-md-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 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 -->