The pagination component provides a way to indicate that a series of related content exists across multiple pages.
<nav aria-label="Page navigation example">
<ul class="pagination pagination-sm ">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true" class="material-icons">first_page</span>
<span class="sr-only">First</span>
</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true" class="material-icons">chevron_left</span>
<span class="sr-only">Prev</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#" aria-label="1">
<span>1</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="2">
<span>2</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span class="sr-only">Next</span>
<span aria-hidden="true" class="material-icons">chevron_right</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span class="sr-only">Last</span>
<span aria-hidden="true" class="material-icons">last_page</span>
</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-sm ">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true" class="material-icons">chevron_left</span>
<span>Prev</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#" aria-label="1">
<span>1</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="2">
<span>2</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span>Next</span>
<span aria-hidden="true" class="material-icons">chevron_right</span>
</a>
</li>
</ul>
</nav>