sleek-dashboard
Version:
Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com
236 lines (232 loc) • 9.25 kB
HTML
---
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> <div class="pagination"> </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> <div class="pagination"> </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> <div class="pagination"> </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> <div class="pagination"> </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> <div class="pagination"> </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>