Pagination

The pagination component provides a way to indicate that a series of related content exists across multiple pages.

First
Prev
1
2
3
4
Next
Last

<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>

Labels

<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>