Bootstrap 4 Pagination

Bootstrap 4 pagination presents page-number navigation. For database paging, validate the requested page, calculate an offset, then use a bounded LIMIT/OFFSET query.

Basic Pagination Markup Top ↑

<nav aria-label="Record pages">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item active">
      <span class="page-link">1</span>
    </li>
    <li class="page-item">
      <a class="page-link" href="?page=2">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="?page=2">Next</a>
    </li>
  </ul>
</nav>

Disabled and Active States Top ↑

Demo: disabled/active pagination →

Pagination Sizes Top ↑

<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

Demo: pagination sizes →

Alignment Top ↑

<ul class="pagination justify-content-center">...</ul>

<ul class="pagination justify-content-end">...</ul>

Demo: pagination alignment →

Database Paging Top ↑

$page = filter_input(
    INPUT_GET,
    'page',
    FILTER_VALIDATE_INT
);

$page = $page && $page > 0
    ? $page
    : 1;

$perPage = 20;
$offset =
    ($page - 1) * $perPage;

$stmt = $dbo->prepare(
    'SELECT id, name, class, mark
     FROM student
     ORDER BY id
     LIMIT :limit OFFSET :offset'
);

$stmt->bindValue(
    ':limit',
    $perPage,
    PDO::PARAM_INT
);

$stmt->bindValue(
    ':offset',
    $offset,
    PDO::PARAM_INT
);

$stmt->execute();

Demo: Bootstrap 4 pagination with PDO →

See PHP paging and Bootstrap tutorials.

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<ul class='pagination justify-content-center'>
<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'><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>

Original example 2

<nav aria-label='There are 4 pages to Navigate'>
<ul class='pagination justify-content-center'>
 <li class='page-item'><a class='page-link' href='#'>Previous</a></li>
  .....
 </ul>
</nav>

Additional Original Learning Routes Top ↑

• bs-alert.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: