Skip to main content

Pagination

Add pagination to navigate across a series of pages with related content.

                
                    <nav class="nav" aria-label="Pagination example">
                        <ul class="pagination justify-content-between w-100 mb-0">
                            <li class="page-item">
                                <a href="#" class="page-link"><span class="sr-only">Previous</span><svg class="bi bi-chevron-left" viewBox="0 0 20 20" width="2rem" height="2rem" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z" clip-rule="evenodd"/>
                                </svg></a>
                            </li>
                            <li class="page-item">
                                <a href="#" class="page-link"><span class="sr-only">Next</span><svg class="bi bi-chevron-right" viewBox="0 0 20 20" width="2rem" height="2rem" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/>
                                </svg></a>
                            </li>
                        </ul>
                    </nav>
                
            

Bootstrap DocumentationExternal link