• Animation
• Accordion
• Alerts
• Blocks
  • Blocks Property
  • Blocks Property List
• Breadcrumb
• Buttons
• Carousel
• Form
• List Group
• Pagination
• Progress Bars
• Rating Stars
• Template customization
• Top Register bar
• Title
• Typography

<nav> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true"><</span> <span class="sr-only">Previous</span> </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"> <span aria-hidden="true">></span> <span class="sr-only">Next</span> </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 aria-hidden="true">«</span> <span class="sr-only">Previous</span> </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"> <span aria-hidden="true"><</span> <span class="sr-only">Previous</span> </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"> <span aria-hidden="true">></span> <span class="sr-only">Next</span> </a> </li> </ul> </nav>