---
layout: default
title: "Pagination - Sleek Admin Dashboard Template"


parent: "components"
sub_parent: "components"
activePage: "pagination"
plugins: []
---
							<div class="breadcrumb-wrapper">
								<h1>Pagination</h1>
								{% include breadcrumb.htm %}
							</div>

							<div class="row">
								<div class="col-xl-6 ">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Default Pagination </h2>
										</div>
										<div class="card-body">
											<p class="pb-5"> Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages. Read bootstrap documentation <a href="https://getbootstrap.com/docs/4.4/components/pagination/" target="_blank">More details</a>
											</p>
											<nav aria-label="Page navigation example">
												<ul class="pagination">
													<li class="page-item">
														<a class="page-link" href="#" aria-label="Previous">
															<span aria-hidden="true" class="mdi mdi-chevron-left"></span>
															<span class="sr-only">Previous</span>
														</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="#" aria-label="Next">
															<span aria-hidden="true" class="mdi mdi-chevron-right"></span>
															<span class="sr-only">Next</span>
														</a>
													</li>
												</ul>
											</nav>
										</div>
									</div>
								</div>
								<div class="col-xl-6 ">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Flat Pagination </h2>
										</div>
										<div class="card-body">
											<p class="mb-5"> For Flat Pagination add class  <code> .pagination-flat </code> to <code> &lt;div class="pagination"&gt; </code>
											</p>
											<nav aria-label="Page navigation example">
												<ul class="pagination pagination-flat ">
													<li class="page-item">
														<a class="page-link" href="#" aria-label="Previous">
															<span aria-hidden="true" class="mdi mdi-chevron-left"></span>
															<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="#" aria-label="Next">
															<span aria-hidden="true" class="mdi mdi-chevron-right"></span>
															<span class="sr-only">Next</span>
														</a>
													</li>
												</ul>
											</nav>
										</div>
									</div>
								</div>
								<div class="col-xl-6 ">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Separated Pagination</h2>
										</div>
										<div class="card-body">
											<p class="mb-5"> For Separated Pagination add class <code> .pagination-seperated </code> to <code> &lt;div class="pagination"&gt; </code>
											</p>
											<nav aria-label="Page navigation example">
												<ul class="pagination pagination-seperated">
													<li class="page-item">
														<a class="page-link" href="#" aria-label="Previous">
															<span aria-hidden="true" class="mdi mdi-chevron-left mr-1"></span> Prev
															<span class="sr-only">Previous</span>
														</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="#" aria-label="Next">
															Next
															<span aria-hidden="true" class="mdi mdi-chevron-right ml-1"></span>
															<span class="sr-only">Next</span>
														</a>
													</li>
												</ul>
											</nav>
										</div>
									</div>
								</div>
								<div class="col-xl-6 ">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Bordered Rounded</h2>
										</div>
										<div class="card-body">
											<p class="mb-5"> For Bordered Rounded Pagination add class <code> .border-rounded </code> to <code> &lt;div class="pagination"&gt; </code>
											</p>
											<nav aria-label="Page navigation example">
												<ul class="pagination border-rounded">
													<li class="page-item">
														<a class="page-link" href="#" aria-label="Previous">
															<span aria-hidden="true" class="mdi mdi-chevron-left"></span>
															<span class="sr-only">Previous</span>
														</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="#" aria-label="Next">
															<span aria-hidden="true" class="mdi mdi-chevron-right"></span>
															<span class="sr-only">Next</span>
														</a>
													</li>
												</ul>
											</nav>
										</div>
									</div>
								</div>
								<div class="col-xl-6 ">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Flat Rounded Pagination</h2>
										</div>
										<div class="card-body">
											<p class="mb-5"> For Flat Rounded Pagination add class <code> .pagination-flat pagination-flat-rounded </code> to <code> &lt;div class="pagination"&gt; </code>
											</p>
											<nav aria-label="Page navigation example">
												<ul class="pagination pagination-flat pagination-flat-rounded">
													<li class="page-item">
														<a class="page-link" href="#" aria-label="Previous">
															<span aria-hidden="true" class="mdi mdi-chevron-left"></span>
															<span class="sr-only">Previous</span>
														</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="#" aria-label="Next">
															<span aria-hidden="true" class="mdi mdi-chevron-right"></span>
															<span class="sr-only">Next</span>
														</a>
													</li>
												</ul>
											</nav>
										</div>
									</div>
								</div>
								<div class="col-xl-6 ">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Seperated Rounded Pagination</h2>
										</div>
										<div class="card-body">
											<p class="mb-5"> For Seperated Rounded Pagination add class <code> .pagination-seperated pagination-seperated-rounded </code> to <code> &lt;div class="pagination"&gt; </code>
											</p>
											<nav aria-label="Page navigation example">
												<ul class="pagination pagination-seperated pagination-seperated-rounded">
													<li class="page-item">
														<a class="page-link" href="#" aria-label="Previous">
															<span aria-hidden="true" class="mdi mdi-chevron-left mr-1"></span> Prev
															<span class="sr-only">Previous</span>
														</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="#" aria-label="Next">
															Next
															<span aria-hidden="true" class="mdi mdi-chevron-right ml-1"></span>
															<span class="sr-only">Next</span>
														</a>
													</li>
												</ul>
											</nav>
										</div>
									</div>
								</div>
							</div>
