Pagination

• Accordion
• Alerts
• Breadcrumb
• Buttons
• Carousel
• Icons
• List Group
• Pagination
• Progress Bars
• Template customization
• Typography

<nav> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> < </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><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="#" aria-label="Next"> > </a> </li> </ul> </nav>

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the prev/next arrows, to remove click functionality while retaining intended styles.

<nav> <ul class="pagination"> <li class="page-item disabled"> <span class="page-link" aria-label="Previous"> « </span> </li> <li class="page-item active"><span class="page-link">1 <span class="sr-only">(current)</span></span></li> </ul> </nav>

<nav> <ul class="pagination pagination-lg"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> < </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><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="#" aria-label="Next"> > </a> </li> </ul> </nav>