Pagination & List Groups

Pagination splits content across pages. Use <nav> with <ul class="pagination"> and <li class="page-item"> with <a class="page-link">.

Pagination

Pagination splits content across pages. Use <nav> with <ul class="pagination"> and <li class="page-item"> with <a class="page-link">.

Add .active on the current page and .disabled on unavailable links.

Real-life example: Pagination is like page numbers at the bottom of a textbook — you jump to chapter 3 without reading every page before it.

Pagination nav

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

List Groups

List groups display a series of items. Use <ul class="list-group"> with <li class="list-group-item">. Add .active, .disabled, or .list-group-item-action for clickable rows.

Combine with badges, buttons, or flush style (.list-group-flush) inside cards.

Real-life example: A list group is like a menu at a restaurant — each dish is one row, and the active item is today's special highlighted.

List group with badges

<ul class="list-group">
  <li class="list-group-item active">Bootstrap lesson — in progress</li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    HTML course
    <span class="badge text-bg-primary rounded-pill">Done</span>
  </li>
  <li class="list-group-item disabled">React — locked</li>
</ul>