Please wait...

Try Sallira with other theme and color combinations
Index variants
Corporate alt1
Color options

Theme components

  1. Home
  2. Components
  3. Pagination
Pagination large
Pagination default
Pagination small
Pagination left
Pagination center
Pagination right
Pager center
Pager float
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>