UNPKG

@coreui/ajax

Version:

Open Source Bootstrap Admin Template

176 lines 6.56 kB
<div class="animated fadeIn"> <div class="card"> <div class="card-header"> <i class="fa fa-align-justify"></i> Pagination <div class="card-actions"> <a href="http://coreui.io/docs/components/bootstrap-pagination/" target="_blank"> <small class="text-muted">docs</small> </a> </div> </div> <div class="card-body"> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li> </ul> </nav> </div> </div> <div class="card"> <div class="card-header"> <i class="fa fa-align-justify"></i> Pagination <small>with icons</small> </div> <div class="card-body"> <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">&laquo;</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"><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">&raquo;</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> </div> </div> <div class="card"> <div class="card-header"> <i class="fa fa-align-justify"></i> Pagination <small>disabled and active</small> </div> <div class="card-body"> <nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</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 <span class="sr-only">(current)</span></a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> <hr/> <nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> <span class="page-link">Previous</span> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"> <span class="page-link"> 2 <span class="sr-only">(current)</span> </span> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> </div> </div> <div class="card"> <div class="card-header"> <i class="fa fa-align-justify"></i> Pagination <small>sizing</small> </div> <div class="card-body"> <nav aria-label="..."> <ul class="pagination pagination-lg"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a> </li> </ul> </nav> <hr/> <nav aria-label="..."> <ul class="pagination pagination-sm"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a> </li> </ul> </nav> </div> </div> <div class="card"> <div class="card-header"> <i class="fa fa-align-justify"></i> Pagination <small>alignment</small> </div> <div class="card-body"> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-start"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a> </li> </ul> </nav> <hr/> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a> </li> </ul> </nav> <hr/> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-end"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a> </li> </ul> </nav> </div> </div> </div>