Please wait...

Try Bacotna with other template and color skins
Index variants
Corporate alt1
Color options
English
English

Components pagination

  1. Home
  2. Components
  3. Pagination
Pagination large
  1. <nav>
  2. 	<ul class="pagination pagination-lg">
  3. 		<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
  4. 		<li class="active"><a href="#">1</a></li>
  5. 		<li><a href="#">2</a></li>
  6. 		<li><a href="#">3</a></li>
  7. 		<li><a href="#">4</a></li>
  8. 		<li><a href="#">5</a></li>
  9. 		<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
  10. 	</ul>
  11. </nav>
Pagination default
  1. <nav>
  2. 	<ul class="pagination">
  3. 		<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
  4. 		<li class="active"><a href="#">1</a></li>
  5. 		<li><a href="#">2</a></li>
  6. 		<li><a href="#">3</a></li>
  7. 		<li><a href="#">4</a></li>
  8. 		<li><a href="#">5</a></li>
  9. 		<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
  10. 	</ul>
  11. </nav>
Pagination small
  1. <nav>
  2. 	<ul class="pagination pagination-sm">
  3. 		<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
  4. 		<li class="active"><a href="#">1</a></li>
  5. 		<li><a href="#">2</a></li>
  6. 		<li><a href="#">3</a></li>
  7. 		<li><a href="#">4</a></li>
  8. 		<li><a href="#">5</a></li>
  9. 		<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
  10. 	</ul>
  11. </nav>
Pagination left
  1. <nav>
  2. 	<ul class="pagination">
  3. 		<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
  4. 		<li class="active"><a href="#">1</a></li>
  5. 		<li><a href="#">2</a></li>
  6. 		<li><a href="#">3</a></li>
  7. 		<li><a href="#">4</a></li>
  8. 		<li><a href="#">5</a></li>
  9. 		<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
  10. 	</ul>
  11. </nav>
Pagination center
  1. <nav>
  2. 	<ul class="pagination pagination-center">
  3. 		<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
  4. 		<li class="active"><a href="#">1</a></li>
  5. 		<li><a href="#">2</a></li>
  6. 		<li><a href="#">3</a></li>
  7. 		<li><a href="#">4</a></li>
  8. 		<li><a href="#">5</a></li>
  9. 		<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
  10. 	</ul>
  11. </nav>
Pagination right
  1. <nav>
  2. 	<ul class="pagination pagination-right">
  3. 		<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
  4. 		<li class="active"><a href="#">1</a></li>
  5. 		<li><a href="#">2</a></li>
  6. 		<li><a href="#">3</a></li>
  7. 		<li><a href="#">4</a></li>
  8. 		<li><a href="#">5</a></li>
  9. 		<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
  10. 	</ul>
  11. </nav>
Pager center
  1. <nav>
  2. 	<ul class="pager">
  3. 		<li><a href="#"><span>«</span> Prev</a></li>
  4. 		<li><a href="#">Next <span>»</span></a></li>
  5. 	</ul>
  6. </nav>
Pager float
  1. <nav>
  2. 	<ul class="pager">
  3. 		<li class="previous"><a href="#"><span>«</span> Prev</a></li>
  4. 		<li class="next"><a href="#">Next <span>»</span></a></li>
  5. 	</ul>
  6. </nav>