Bootstrap Pagination #Part 8

 Bootstrap Pagination #Part 8



         Pagination is built with list HTML elements so screen readers can announce the number of available links.

Bootstrap Code

Simple Pagination

<nav aria-label="Page navigation example">

<ul class="pagination">

<li class="page-item"><a class="page-link">previous</a></li>

<li class="page-item"><a class="page-link">1</a></li>

<li class="page-item"><a class="page-link">2</a></li>

<li class="page-item"><a class="page-link" >next</a></li>

</ul>

</nav>

Icon pagination

<nav aria-label="Page navigation example">

<ul class="pagination">

<li class="page-item"><a class="page-link">

<span aria-hidden="true">&laquo;</span>

</a></li>

<li class="page-item"><a class="page-link">1</a></li>

<li class="page-item"><a class="page-link">2</a></li>

<li class="page-item"><a class="page-link" >

<span aria-hidden="true">&raquo;</span>

</a></li>

</ul>

</nav>

Bootstrap CDN link






<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" >

Try it Yourself...

what you think about this article ??

Post a Comment

Previous Post Next Post