Bootstrap 5 Pagination

How it works

Pagination controls navigate portions of one collection. The current page state, disabled destinations and available URLs must agree with the actual data. A disabled-looking anchor can remain keyboard-focusable unless handled correctly, so a noninteractive span is clearer for an unavailable previous page. This lab shows a presentation fixture with one current page and a real next-section anchor; it does not imply a server query, an uploaded dataset or a saved page preference.

Run and inspect

Save the complete document as index.html in a separate lab folder. Place Bootstrap 5.3.8 CSS beside it. Open the file in a normal browser. A separate local static server is optional; no database or PHP execution is required. Keep the Bootstrap licence with redistributed assets.

Download this complete HTML source.

Try in playground

The preview injects local Bootstrap CSS when you select Run code. It blocks external resources and actual form submission; nothing runs on import. Bootstrap plugin scripts are not loaded there.

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Separate Pagination Appearance From Working Data Navigation</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<main class="container py-4">
  <h1 class="h3 mb-4">Repair day</h1>
<nav aria-label="Session results"><ul class="pagination"><li class="page-item disabled"><span class="page-link">Previous</span></li><li class="page-item active" aria-current="page"><span class="page-link">1</span></li><li class="page-item"><a class="page-link" href="#more-sessions" aria-label="Read the next session section">Next section</a></li></ul></nav><section id="more-sessions"><h2 class="h5">More sessions</h2><p class="mb-0">This is the local link target, not a second fetched results page.</p></section>
</main>
</body>
</html>

Expected result

The unavailable previous control is text, the current page is identified and the one link resolves to an existing section.

A real implementation should update URL, content and current state consistently, while preserving filters where appropriate. If a page replaces results dynamically, focus and a useful result announcement need design. Do not add thousands of page links when a compact range and meaningful navigation would be easier to use.