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-->
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>
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>
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>
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>
Lorem Ipsum is simply dummy text of the printing and industry.
There are many variations of passages of Lorem Ipsum available.
Contrary to popular belief, Lorem Ipsum is not simply random text.
If you are going to use a passage of Lorem Ipsum, you need.
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
