<nav aria-label="Page navigation">
	  <ul class="pagination">
		<li class="page-item"><a class="page-link" href="#"><i class="fa fa-angle-left" aria-hidden="true"></i></a></li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item active"><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="fa fa-angle-right" aria-hidden="true"></i></a></li>
	  </ul>
	</nav>

						

How to use

Pagination links indicate a series of related content exists across multiple pages.

• All style are done using bootstrap 4 default classes
• use .active class with .page-item to specify the active page

	<!-- Middle/center align -->
	<nav aria-label="Page navigation">
	  <ul class="pagination justify-content-center">
		<li class="page-item disabled">
		  <a class="page-link" href="#" tabindex="-1"><i class="fa fa-angle-left" aria-hidden="true"></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="fa fa-angle-right" aria-hidden="true"></i></a>
		</li>
	  </ul>
	</nav>

	<!-- Right align -->
	<ul class="pagination justify-content-end">
		....
	</ul>

						

How to use

• use .justify-content-center for middle align
• use .justify-content-end for right align