@themesberg/pixel-lite-bootstrap-ui-kit
Version:
Open-source Bootstrap 5 UI Kit
188 lines • 8.85 kB
HTML
<!-- Section -->
<div class="section section-md">
<div class="container">
<div class="row mt-4">
<div class="col-md-6">
<div class="mb-4">
<h4 class="h6 font-weight-bold">Pagination with icon-nav</h4>
</div>
<nav aria-label="Blog page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" aria-label="first link" href="#"><span
class="fas fa-angle-double-left"></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="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" aria-label="first link" href="#"><span
class="fas fa-angle-double-right"></span></a>
</li>
</ul>
</nav>
</div>
<div class="col-md-6">
<div class="mt-4 mb-4 mt-sm-0">
<h4 class="h6 font-weight-bold">Pagination with text-nav</h4>
</div>
<nav aria-label="Products page navigation">
<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 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="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-6">
<div class="mb-4">
<h4 class="h6 font-weight-bold">Disabled and active states</h4>
</div>
<nav aria-label="Templates page navigation">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" aria-label="first link" tabindex="-1" href="#">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</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" aria-label="first link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
<div class="col-lg-6">
<div class="mt-4 mb-4 mt-sm-0">
<h4 class="h6 font-weight-bold">Choose your size</h4>
</div>
<nav aria-label="Default page navigation">
<ul class="pagination pagination-lg">
<li class="page-item">
<a class="page-link" aria-label="first link" href="#"><span
class="fas fa-angle-double-left"></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="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" aria-label="first link" href="#"><span
class="fas fa-angle-double-right"></span></a>
</li>
</ul>
</nav>
<nav aria-label="Themesberg page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" aria-label="first link" href="#"><span
class="fas fa-angle-double-left"></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="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" aria-label="first link" href="#"><span
class="fas fa-angle-double-right"></span></a>
</li>
</ul>
</nav>
<nav aria-label="Posts navigation example">
<ul class="pagination pagination-sm">
<li class="page-item">
<a class="page-link" aria-label="first link" href="#"><span
class="fas fa-angle-double-left"></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="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" aria-label="first link" href="#"><span
class="fas fa-angle-double-right"></span></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!-- End of Section -->