Pagination
Advanced Pagination examples using Bootstap Buttons and Form Controls.
Basic Examples
Use .btn and form-control to have extended pagination option.
<!--begin::Pagination-->
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex flex-wrap py-2 mr-3">
<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-double-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">23</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1">24</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">25</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">26</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">27</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">28</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-arrow-next icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-double-arrow-next icon-xs"></i></a>
</div>
<div class="d-flex align-items-center py-3">
<div class="d-flex align-items-center">
<div class="mr-2 text-muted">Loading...</div>
<div class="spinner mr-10"></div>
</div>
<select class="form-control form-control-sm font-weight-bold mr-4 border-0 bg-light" style="width: 75px;">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span class="text-muted">Displaying 10 of 230 records</span>
</div>
</div>
<!--end:: Pagination-->
Color Options
Use .btn-light-{color} and .btn-hover-{color} classes to pagination color options.
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex flex-wrap py-2 mr-3">
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1"><i class="ki ki-bold-double-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1"><i class="ki ki-bold-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">23</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary active mr-2 my-1">24</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">25</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">26</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">27</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">28</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1"><i class="ki ki-bold-arrow-next icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1"><i class="ki ki-bold-double-arrow-next icon-xs"></i></a>
</div>
<div class="d-flex align-items-center py-3">
<div class="d-flex align-items-center">
<div class="mr-2 text-muted">Loading...</div>
<div class="spinner spinner-primary mr-10"></div>
</div>
<select class="form-control form-control-sm text-primary font-weight-bold mr-4 border-0 bg-light-primary" style="width: 75px;">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span class="text-muted">Displaying 10 of 230 records</span>
</div>
</div>
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex flex-wrp py-2 mr-3">
<a href="#" class="btn btn-icon btn-sm btn-light-success mr-2 my-1"><i class="ki ki-bold-double-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm btn-light-success mr-2 my-1"><i class="ki ki-bold-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-success mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-success mr-2 my-1">23</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-success active mr-2 my-1">24</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-success mr-2 my-1">25</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-success mr-2 my-1">26</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-success mr-2 my-1">27</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-success mr-2 my-1">28</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-success mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-sm btn-light-success mr-2 my-1"><i class="ki ki-bold-arrow-next icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm btn-light-success mr-2 my-1"><i class="ki ki-bold-double-arrow-next icon-xs"></i></a>
</div>
<div class="d-flex align-items-center py-3">
<div class="d-flex align-items-center">
<div class="mr-2 text-muted">Loading...</div>
<div class="spinner spinner-success mr-10"></div>
</div>
<select class="form-control form-control-sm text-success font-weight-bold mr-4 border-0 bg-light-primary" style="width: 75px;">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span class="text-muted">Displaying 10 of 230 records</span>
</div>
</div>
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex flex-wrap py-2 mr-3">
<a href="#" class="btn btn-icon btn-sm btn-light-danger mr-2 my-1"><i class="ki ki-bold-double-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm btn-light-danger mr-2 my-1"><i class="ki ki-bold-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-danger mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-danger mr-2 my-1">23</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-danger active mr-2 my-1">24</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-danger mr-2 my-1">25</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-danger mr-2 my-1">26</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-danger mr-2 my-1">27</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-danger mr-2 my-1">28</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-danger mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-sm btn-light-danger mr-2 my-1"><i class="ki ki-bold-arrow-next icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm btn-light-danger mr-2 my-1"><i class="ki ki-bold-double-arrow-next icon-xs"></i></a>
</div>
<div class="d-flex align-items-center py-3">
<div class="d-flex align-items-center">
<div class="mr-2 text-muted">Loading...</div>
<div class="spinner spinner-danger mr-10"></div>
</div>
<select class="form-control form-control-sm text-danger font-weight-bold mr-4 border-0 bg-light-danger" style="width: 75px;">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span class="text-muted">Displaying 10 of 230 records</span>
</div>
</div>
Sizes
Use .btn with .btn-sm to have small pagination size.
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex flex-wrap py-2 mr-3">
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1"><i class="ki ki-bold-double-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1"><i class="ki ki-bold-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">23</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary active mr-2 my-1">24</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">25</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">26</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">27</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">28</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1"><i class="ki ki-bold-arrow-next icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1"><i class="ki ki-bold-double-arrow-next icon-xs"></i></a>
</div>
<div class="d-flex align-items-center py-3">
<div class="d-flex align-items-center">
<div class="mr-2 text-muted">Loading...</div>
<div class="spinner spinner-primary mr-10"></div>
</div>
<select class="form-control form-control-sm text-primary font-weight-bold mr-4 border-0 bg-light-primary" style="width: 75px;">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span class="text-muted">Displaying 10 of 230 records</span>
</div>
</div>
Use .btn to have default pagination size.
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex flex-wrap py-2 mr-3">
<a href="#" class="btn btn-icon btn-light-primary mr-2 my-1"><i class="ki ki-bold-double-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-light-primary mr-2 my-1"><i class="ki ki-bold-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon border-0 btn-hover-primary mr-2 my-1">...</a>
<a href="#" class="btn btn-icon border-0 btn-hover-primary mr-2 my-1">23</a>
<a href="#" class="btn btn-icon border-0 btn-hover-primary active mr-2 my-1">24</a>
<a href="#" class="btn btn-icon border-0 btn-hover-primary mr-2 my-1">25</a>
<a href="#" class="btn btn-icon border-0 btn-hover-primary mr-2 my-1">26</a>
<a href="#" class="btn btn-icon border-0 btn-hover-primary mr-2 my-1">27</a>
<a href="#" class="btn btn-icon border-0 btn-hover-primary mr-2 my-1">28</a>
<a href="#" class="btn btn-icon border-0 btn-hover-primary mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-light-primary mr-2 my-1"><i class="ki ki-bold-arrow-next icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-light-primary mr-2 my-1"><i class="ki ki-bold-double-arrow-next icon-xs"></i></a>
</div>
<div class="d-flex align-items-center py-3">
<div class="d-flex align-items-center">
<div class="mr-2 text-muted">Loading...</div>
<div class="spinner spinner-primary mr-10"></div>
</div>
<select class="form-control text-primary font-weight-bold mr-4 border-0 bg-light-primary" style="width: 75px;">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span class="text-muted">Displaying 10 of 230 records</span>
</div>
</div>
Use .btn with .btn-lg to have large pagination size.
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex flex-wrap py-2 mr-3">
<a href="#" class="btn btn-icon btn-lg btn-light-primary mr-2 my-1"><i class="ki ki-bold-double-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-lg btn-light-primary mr-2 my-1"><i class="ki ki-bold-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-lg border-0 btn-hover-primary mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-lg border-0 btn-hover-primary mr-2 my-1">23</a>
<a href="#" class="btn btn-icon btn-lg border-0 btn-hover-primary active mr-2 my-1">24</a>
<a href="#" class="btn btn-icon btn-lg border-0 btn-hover-primary mr-2 my-1">25</a>
<a href="#" class="btn btn-icon btn-lg border-0 btn-hover-primary mr-2 my-1">26</a>
<a href="#" class="btn btn-icon btn-lg border-0 btn-hover-primary mr-2 my-1">27</a>
<a href="#" class="btn btn-icon btn-lg border-0 btn-hover-primary mr-2 my-1">28</a>
<a href="#" class="btn btn-icon btn-lg border-0 btn-hover-primary mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-lg btn-light-primary mr-2 my-1"><i class="ki ki-bold-arrow-next icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-lg btn-light-primary mr-2 my-1"><i class="ki ki-bold-double-arrow-next icon-xs"></i></a>
</div>
<div class="d-flex align-items-center py-3">
<div class="d-flex align-items-center">
<div class="mr-2 text-muted">Loading...</div>
<div class="spinner spinner-primary mr-10"></div>
</div>
<select class="form-control form-control-lg text-primary font-weight-bold mr-4 border-0 bg-light-primary" style="width: 75px;">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span class="text-muted">Displaying 10 of 230 records</span>
</div>
</div>
Circle Buttons
Use .btn with .btn-circle to have pagination with circle buttons.
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex flex-wrap py-2 mr-3">
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1"><i class="ki ki-bold-double-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1"><i class="ki ki-bold-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">23</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary active mr-2 my-1">24</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">25</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">26</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">27</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">28</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1"><i class="ki ki-bold-arrow-next icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1"><i class="ki ki-bold-double-arrow-next icon-xs"></i></a>
</div>
<div class="d-flex align-items-center py-3">
<div class="d-flex align-items-center">
<div class="mr-2 text-muted">Loading...</div>
<div class="spinner spinner-primary mr-10"></div>
</div>
<select class="form-control form-control-sm text-primary font-weight-bold mr-4 border-0 bg-light-primary" style="width: 75px;">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span class="text-muted">Displaying 10 of 230 records</span>
</div>
</div>
Disabled Buttons
Use .btn with .btn-circle to have pagination with circle buttons.
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex flex-wrap py-2 mr-3">
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1 disabled" disabled><i class="ki ki-bold-double-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2"><i class="ki ki-bold-arrow-back icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">23</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary active mr-2 my-1">24</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">25</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">26</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">27</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">28</a>
<a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">...</a>
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1"><i class="ki ki-bold-arrow-next icon-xs"></i></a>
<a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1 disabled" disabled><i class="ki ki-bold-double-arrow-next icon-xs"></i></a>
</div>
<div class="d-flex align-items-center py-3">
<div class="d-flex align-items-center">
<div class="mr-2 text-muted">Loading...</div>
<div class="spinner spinner-primary mr-10"></div>
</div>
<select class="form-control form-control-sm text-primary font-weight-bold mr-4 border-0 bg-light-primary" style="width: 75px;">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span class="text-muted">Displaying 10 of 230 records</span>
</div>
</div>
