View Demo Buy Now Our Portfolio

Navigation Style

Horizontal Left-menu

Skin Modes

Default Mode
White Mode
Dark Mode

Header Styles Mode

Light Menu
Dark Menu
Color Menu
Graident Menu
Left-menu Bg-Image

Leftmenu Styles Mode

Light Menu
Dark Menu
Color Menu
Gradient-Color Menu
Loader
logo
View all Notification
3
See all Messages
img
English
flag-img
French
flag-img
Germany
flag-img
Italy
flag-img
Russia
flag-img
Spain
profile-user
Jacob Fisher
My Profile Edit Profile Account Settings Inbox Message Need help? Sign out

Pagination

  1. Elements
  2. Pagination
Add Order Add User

Basic pagination

<div class="pagination-wrapper">
	<nav aria-label="Page navigation">
		<ul class="pagination mb-0">
			<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 aria-label="Next" class="page-link" href="#"><i class="fa fa-angle-left"></i></a>
			</li>
		</ul>
	</nav>
</div>

Basic pagination

<ul class="pagination">
	<li class="page-item page-prev disabled">
		<a class="page-link" href="#" tabindex="-1">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 page-next">
		<a class="page-link" href="#">Next</a>
	</li>
</ul>

Model Pagination

<ul class="pagination mg-b-0 page-0">
	<li class="page-item">
		<a aria-label="Last" class="page-link" href="#"><i class="fa fa-angle-double-right"></i></a>
	</li>
	<li class="page-item">
		<a aria-label="Next" class="page-link" href="#"><i class="fa fa-angle-right"></i></a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">2</a>
	</li>
	<li class="page-item active">
		<a class="page-link" href="#">3</a>
	</li>
	<li class="page-item">
		<a class="page-link hidden-xs-down" href="#">4</a>
	</li>
	<li class="page-item">
		<a aria-label="Next" class="page-link" href="#"><i class="fa fa-angle-left"></i></a>
	</li>
	<li class="page-item">
		<a aria-label="Last" class="page-link" href="#"><i class="fa fa-angle-double-left"></i></a>
	</li>
</ul>

Model Pagination2

<nav aria-label="Page navigation">
	<ul class="pagination pagination-success mb-0">
		<li class="page-item page-0">
			<a aria-label="Next" class="page-link" href="#"><i class="fa fa-angle-right"></i></a>
		</li>
		<li class="page-item">
			<a aria-label="Last" class="page-link" href="#"><i class="fa fa-angle-double-right"></i></a>
		</li>
		<li class="page-item active">
			<a class="page-link" href="#">4</a>
		</li>
		<li class="page-item disabled"><span class="page-link">...</span></li>
		<li class="page-item">
			<a class="page-link" href="#">10</a>
		</li>
		<li class="page-item page-0">
			<a aria-label="Next" class="page-link" href="#"><i class="fa fa-angle-left"></i></a>
		</li>
		<li class="page-item">
			<a aria-label="Last" class="page-link" href="#"><i class="fa fa-angle-double-left"></i></a>
		</li>
	</ul>
</nav>

Model Pagination2

<nav aria-label="Page navigation example">
	<ul class="pagination">
		<li class="page-item">
			<a class="page-link" href="#" aria-label="Previous">
				<i class="fa fa-angle-right"></i>
				<span class="sr-only">Previous</span>
			</a>
		</li>
		<li class="page-item"><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="#" aria-label="Next">
				<i class="fa fa-angle-left"></i>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</nav>

Pagination left alignment

<nav aria-label="Page navigation example">
	<ul class="pagination ">
		<li class="page-item disabled">
			<a class="page-link" href="#" tabindex="-1">
				<i class="fa fa-angle-right"></i>
				<span class="sr-only">Previous</span>
			</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-left"></i>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</nav>

Pagination center alignment

<nav aria-label="Page navigation example">
	<ul class="pagination justify-content-center">
		<li class="page-item disabled">
			<a class="page-link" href="#" tabindex="-1">
				<i class="fa fa-angle-right"></i>
				<span class="sr-only">Previous</span>
			</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-left"></i>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</nav>

Pagination Right Alignment

<nav aria-label="Page navigation example">
	<ul class="pagination justify-content-end">
		<li class="page-item disabled">
			<a class="page-link" href="#" tabindex="-1">
				<i class="fa fa-angle-right"></i>
				<span class="sr-only">Previous</span>
			</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-left"></i>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</nav>
General Settings
Notifications
Show your emails
Show Task statistics
Show recent activity
System Logs
Error Reporting
Show your status to all
Keep up to date
Overview

Achieves80%

Projects60%

Earnings50%

Balance45%

Toatal Profits75%

Total Likes70%