Pagination UI Variants - HTML CSS Bootstrap

Home/Components/Paginations/Pagination UI Variants - HTML CSS Bootstrap

Code · Live Preview

Componenthtml

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pagination Variants | CodeKK</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="wrap">

  <div class="block">
    <h6>VARIANT 1 - CLASSIC NUMBERED</h6>
    <div class="center-row">
      <nav>
        <ul class="pagination pg-1 mb-0">
          <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
          <li class="page-item active"><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="#">Next</a></li>
        </ul>
      </nav>
    </div>
  </div>

  <div class="block">
    <h6>VARIANT 2 - PILL WITH ICON ARROWS</h6>
    <div class="center-row">
      <nav>
        <ul class="pagination pg-2 mb-0">
          <li class="page-item">
            <a class="page-link" href="#">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            </a>
          </li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item active"><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="#">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

  <div class="block">
    <h6>VARIANT 3 - COMPACT WITH RESULTS LABEL</h6>
    <div class="pg-3-wrap">
      <span class="results">Showing 1–5 of 42</span>
      <nav>
        <ul class="pagination pg-3 mb-0">
          <li class="page-item"><a class="page-link" href="#">Prev</a></li>
          <li class="page-item active"><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"><span class="page-link border-0">…</span></li>
          <li class="page-item"><a class="page-link" href="#">9</a></li>
          <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
      </nav>
    </div>
  </div>

</div>

</body>
</html>

Detecting libraries...

Component details

Overview, install command, dependencies, and project links.

Three pagination UI variants built with Bootstrap 5 and custom CSS - no JavaScript needed. Variant 1 is a classic numbered pagination with Bootstrap's default structure recolored to a violet accent. Variant 2 is a pill-style pagination with borderless circular buttons, SVG chevron arrows, and a solid violet active state. Variant 3 is a compact pagination with a results label on the left showing total count, ellipsis for skipped pages, and rounded square page buttons. All three share the same violet color system defined in CSS custom properties - changing the accent color takes one variable update. Manrope font from Google Fonts. Two files - index.html and style.css - drop in a folder and open in a browser.

Added Sep 9, 2026

Discussion

Feedback, implementation tips, and usage notes.

0 threads

Component details

Discussion

Comments