Metronic customizes the
										
Bootstrap Pagination   through the SASS variables in
										
src/sass/components/_variables.scssand adds additonal options in
										
src/sass/components/_pagination.scss.
 
									
									
									
										
										
										 
										
										
										Use slightly customized pagination with previouse and next icon links:
										
										
										
										
										
										
											
											
												copy 
												
													
<ul class="pagination">
    <li class="page-item previous disabled"><a href="#" class="page-link"><i class="previous"></i></a></li>
    <li class="page-item "><a href="#" class="page-link">1</a></li>
    <li class="page-item active"><a href="#" class="page-link">2</a></li>
    <li class="page-item "><a href="#" class="page-link">3</a></li>
    <li class="page-item "><a href="#" class="page-link">4</a></li>
    <li class="page-item "><a href="#" class="page-link">5</a></li>
    <li class="page-item "><a href="#" class="page-link">6</a></li>
    <li class="page-item next"><a href="#"  class="page-link"><i class="next"></i></a></li>
</ul>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use slightly customized pagination with arrows and offset:
										
										
										
										
										
										
											
											
												copy 
												
													
<ul class="pagination">
    <li class="page-item previous disabled"><a href="#" class="page-link"><i class="previous"></i></a></li>
    <li class="page-item "><a href="#" class="page-link">1</a></li>
    <li class="page-item active"><a href="#" class="page-link">2</a></li>
    <li class="page-item "><a href="#" class="page-link">3</a></li>
    <li class="page-item "><a href="#" class="page-link">...</a></li>
    <li class="page-item "><a href="#" class="page-link">5</a></li>
    <li class="page-item "><a href="#" class="page-link">6</a></li>
    <li class="page-item next"><a href="#"  class="page-link"><i class="next"></i></a></li>
</ul>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Previous and next buttons with text:
										
										
										
										
										
										
											
											
												copy 
												
													
<ul class="pagination">
    <li class="page-item previous disabled"><span class="page-link">Previous</span></span></li>
    <li class="page-item "><a href="#" class="page-link">1</a></li>
    <li class="page-item active"><a href="#" class="page-link">2</a></li>
    <li class="page-item "><a href="#" class="page-link">3</a></li>
    <li class="page-item "><a href="#" class="page-link">4</a></li>
    <li class="page-item "><a href="#" class="page-link">5</a></li>
    <li class="page-item "><a href="#" class="page-link">6</a></li>
    <li class="page-item next"><a class="page-link" href="#">Next</span></a></li>
</ul>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Pagination with circle buttons:
										
										
										
										
										
										
											
											
												copy 
												
													
<ul class="pagination pagination-circle">
    <li class="page-item previous disabled"><a href="#" class="page-link"><i class="previous"></i></a></li>
    <li class="page-item "><a href="#" class="page-link">1</a></li>
    <li class="page-item active"><a href="#" class="page-link">2</a></li>
    <li class="page-item "><a href="#" class="page-link">3</a></li>
    <li class="page-item "><a href="#" class="page-link">4</a></li>
    <li class="page-item "><a href="#" class="page-link">5</a></li>
    <li class="page-item "><a href="#" class="page-link">6</a></li>
    <li class="page-item next"><a href="#"  class="page-link"><i class="next"></i></a></li>
</ul>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use slightly customized pagination with outline buttons:
										
										
										
										
										
										
											
											
												copy 
												
													
<ul class="pagination pagination-outline">
    <li class="page-item previous disabled m-1"><a href="#" class="page-link"><i class="previous"></i></a></li>
    <li class="page-item m-1"><a href="#" class="page-link">1</a></li>
    <li class="page-item active m-1"><a href="#" class="page-link">2</a></li>
    <li class="page-item m-1"><a href="#" class="page-link">3</a></li>
    <li class="page-item m-1"><a href="#" class="page-link">4</a></li>
    <li class="page-item m-1"><a href="#" class="page-link">5</a></li>
    <li class="page-item m-1"><a href="#" class="page-link">6</a></li>
    <li class="page-item next m-1"><a href="#"  class="page-link"><i class="next"></i></a></li>
</ul>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Pagination with outline and circle buttons:
										
										
										
										
										
										
											
											
												copy 
												
													
<ul class="pagination pagination-circle pagination-outline">
    <li class="page-item previous disabled m-1"><a href="#" class="page-link"><i class="previous"></i></a></li>
    <li class="page-item m-1"><a href="#" class="page-link">1</a></li>
    <li class="page-item active m-1"><a href="#" class="page-link">2</a></li>
    <li class="page-item m-1"><a href="#" class="page-link">3</a></li>
    <li class="page-item m-1"><a href="#" class="page-link">4</a></li>
    <li class="page-item m-1"><a href="#" class="page-link">5</a></li>
    <li class="page-item m-1"><a href="#" class="page-link">6</a></li>
    <li class="page-item next m-1"><a href="#"  class="page-link"><i class="next"></i></a></li>
</ul>