WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

PAGINATIONS

  1. Home
  2. Shortcodes
  3. Paginations

Pagination



Show Code 
<!-- Pagination Small -->
<ul class="pagination pagination-sm">
	<li class="page-item"><a class="page-link" href="#">&laquo;</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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
	<li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
</ul>


<!-- Pagination Default -->
<ul class="pagination">
	<li class="page-item"><a href="#">&laquo;</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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
	<li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
</ul>


<!-- Pagination Large -->
<ul class="pagination pagination-lg">
	<li class="page-item"><a class="page-link" href="#">&laquo;</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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
	<li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
</ul>

Disabled Prev Pagination



Show Code 
<!-- Pagination Small -->
<ul class="pagination pagination-sm">
	<li class="page-item disabled"><a class="page-link" href="#">Prev</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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
	<li class="page-item"><a class="page-link" href="#">Next;</a></li>
</ul>


<!-- Pagination Default -->
<ul class="pagination">
	<li class="page-item disabled"><a class="page-link" href="#">Prev</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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
	<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>


<!-- Pagination Large -->
<ul class="pagination pagination-lg">
	<li class="page-item disabled"><a class="page-link" href="#">Prev</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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
	<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Pagination



Show Code 
<!-- Pagination Small -->
<ul class="pagination pagination-simple pagination-sm">
	<li class="page-item"><a class="page-link" href="#">&laquo;</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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
	<li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
</ul>


<!-- Pagination Default -->
<ul class="pagination pagination-simple">
	<li class="page-item"><a class="page-link" href="#">&laquo;</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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
	<li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
</ul>


<!-- Pagination Large -->
<ul class="pagination pagination-simple pagination-lg">
	<li class="page-item"><a class="page-link" href="#">&laquo;</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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
	<li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
</ul>

Disabled Prev Pagination



Show Code 
<!-- Pagination Small -->
<ul class="pagination pagination-simple pagination-sm">
	<li class="page-item disabled"><a class="page-link" href="#">Prev</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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
	<li class="page-item"><a class="page-link" href="#">Next;</a></li>
</ul>


<!-- Pagination Default -->
<ul class="pagination pagination-simple">
	<li class="page-item disabled"><a class="page-link" href="#">Prev</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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
	<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>


<!-- Pagination Large -->
<ul class="pagination pagination-simple pagination-lg">
	<li class="page-item disabled"><a class="page-link" href="#">Prev</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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
	<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Pager

Show Code 
<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>



Show Code 
<ul class="pager">
  <li><a class="radius-0" href="#">Previous</a></li>
  <li><a class="radius-0" href="#">Next</a></li>
</ul>

Aligned Links

Show Code 
<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>



Show Code 
<ul class="pager">
  <li class="previous"><a class="radius-0" href="#">&larr; Older</a></li>
  <li class="next"><a class="radius-0" href="#">Newer &rarr;</a></li>
</ul>