Bootstrap Pagination

Pagination divides a large collection of content into smaller pages. Instead of displaying hundreds of records on one page, we can display a limited number of records and provide navigation links.

For example, a student management system may display 10 students per page and provide links for page 1, page 2, page 3, and so on.

The .pagination class creates the main Bootstrap pagination container.

<nav>

    <ul class="pagination">

        <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>

    </ul>

</nav>

The .pagination class is applied to the <ul> element that contains the pagination items.

<ul class="pagination">

    ...

</ul>

It provides the basic layout and styling for the pagination control.

The .page-item class is used for each individual pagination item.

<li class="page-item">

    ...

</li>

Each page number, Previous button, and Next button is generally placed inside a .page-item.

The .page-link class styles the clickable pagination link.

<a
class="page-link"
href="#">

1

</a>

Pagination commonly contains Previous and Next controls.

<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">

        <a class="page-link"
        href="#">

        Next

        </a>

    </li>

</ul>

You can add multiple page numbers inside the pagination component.

<ul class="pagination">

    <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>

</ul>

Use the .active class to indicate the current page.

<li
class="page-item active"
aria-current="page">

    <a class="page-link"
    href="#">

    2

    </a>

</li>

Use the .disabled class when a pagination control should appear unavailable.

<li class="page-item disabled"
aria-disabled="true">

    <a class="page-link"
    href="#">

    Previous

    </a>

</li>

You can use symbols such as « and » for Previous and Next navigation.

<li class="page-item">

    <a class="page-link"
    href="#">

    &laquo;

    </a>

</li>

<li class="page-item">

    <a class="page-link"
    href="#">

    &raquo;

    </a>

</li>

You can use readable text instead of symbols for navigation controls.

<li class="page-item">

    <a class="page-link"
    href="#">

    Previous

    </a>

</li>

Use .pagination-sm to create a smaller pagination component.

<ul class="pagination pagination-sm">

    <li class="page-item">
    <a class="page-link" href="#">
    1
    </a>
    </li>

    <li class="page-item">
    <a class="page-link" href="#">
    2
    </a>
    </li>

</ul>

Use .pagination-lg to create a larger pagination component.

<ul class="pagination pagination-lg">

    <li class="page-item">
    <a class="page-link" href="#">
    1
    </a>
    </li>

    <li class="page-item">
    <a class="page-link" href="#">
    2
    </a>
    </li>

</ul>

Flexbox utilities can be used to center a pagination component.

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

    ...

</ul>

Use justify-content-end to align pagination toward the end of the available space.

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

    ...

</ul>

The default Bootstrap pagination layout starts from the beginning of the available space.

<ul
class="pagination justify-content-start">

    ...

</ul>

For a large number of pages, an ellipsis can be used to indicate omitted page numbers.

<li class="page-item">
<a class="page-link" href="#">
1
</a>
</li>

<li class="page-item disabled">
<span class="page-link">
...
</span>
</li>

<li class="page-item">
<a class="page-link" href="#">
10
</a>
</li>

Pagination is very useful when displaying database records. For example, a PHP application may retrieve only 10 students from a database for each page.

<?php

$limit = 10;

$page = 1;

$offset = ($page - 1) * $limit;

$sql = "SELECT * FROM students
        LIMIT $offset, $limit";

?>

The Bootstrap pagination component controls which page number is requested. PHP or another backend language then retrieves the corresponding records.

A PHP application can read the current page number from the URL.

<?php

$page = isset($_GET['page'])
        ? (int)$_GET['page']
        : 1;

if ($page < 1) {
    $page = 1;
}

?>

For example:

students.php?page=2

This tells the server that page 2 should be displayed.

PHP can generate Previous and Next links dynamically.

<?php

$previous = $page - 1;
$next = $page + 1;

?>

<a
href="students.php?page=<?php echo $previous; ?>"
class="page-link">

Previous

</a>

<a
href="students.php?page=<?php echo $next; ?>"
class="page-link">

Next

</a>

In a real application, you should also check whether the previous or next page actually exists.

Wrap pagination inside a <nav> element and use aria-label to describe the navigation purpose.

<nav
aria-label="Student records navigation">

    <ul class="pagination">

        ...

    </ul>

</nav>

This improves the meaning of the navigation for assistive technology.

When using symbols instead of words, add accessible labels to explain their meaning.

<a
class="page-link"
href="#"
aria-label="Previous">

&laquo;

</a>

<a
class="page-link"
href="#"
aria-label="Next">

&raquo;

</a>

This gives screen readers meaningful descriptions for the navigation controls.

Pagination is commonly used with search results. For example, a website may display 10 search results on each page.

<nav
aria-label="Search results pages">

    <ul class="pagination">

        <li class="page-item active">
            <a class="page-link"
            href="?page=1">
            1
            </a>
        </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=3">
            3
            </a>
        </li>

    </ul>

</nav>

In an admin panel, pagination can be used to display student records without loading every record at once.

<table class="table">

    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Course</th>
    </tr>

    <tr>
        <td>101</td>
        <td>Rahul</td>
        <td>ADCA</td>
    </tr>

</table>


<nav aria-label="Student pages">

    <ul class="pagination">

        <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>

    </ul>

</nav>

Pagination can also be used below cards when displaying products, courses, articles, or tutorials.

<div class="card">

    <div class="card-body">

        <h5>Course 1</h5>

        <p>
        Web Development
        </p>

    </div>

</div>


<nav class="mt-3"
aria-label="Course pages">

    <ul class="pagination">

        ...

    </ul>

</nav>

Bootstrap pagination is designed to work with responsive layouts. However, when there are many page links, you should avoid creating an overly long navigation control on small screens.

A common solution is to show only the most useful page numbers along with Previous and Next controls.

<nav
aria-label="Responsive pagination">

    <ul class="pagination">

        <li class="page-item">
            <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="#">
            Next
            </a>
        </li>

    </ul>

</nav>

Pagination should be accessible and understandable for all users.

• Use a <nav> element for pagination navigation.
• Give the navigation a meaningful aria-label.
• Use aria-current="page" on the current page.
• Provide meaningful labels for Previous and Next controls.
• Do not rely only on color to identify the current page.
• Keep pagination controls understandable on small screens.

<nav
aria-label="Page navigation">

    <ul class="pagination">

        <li
        class="page-item active"
        aria-current="page">

            <a
            class="page-link"
            href="#">

            1

            </a>

        </li>

    </ul>

</nav>

Avoid these common mistakes when creating pagination:

• Forgetting the .pagination class.
• Forgetting the .page-item wrapper.
• Forgetting the .page-link class.
• Not indicating the current page.
• Showing too many page numbers.
• Creating links to pages that do not exist.
• Not disabling Previous on the first page.
• Not disabling Next on the last page.
• Ignoring accessibility.
• Not preserving search or filter parameters when changing pages.

A typical PHP pagination system follows these steps:

1. Read the current page number.
2. Set the number of records per page.
3. Calculate the database offset.
4. Fetch records for the current page.
5. Calculate the total number of pages.
6. Generate Bootstrap pagination links.
7. Disable Previous on the first page.
8. Disable Next on the last page.

<?php

$limit = 10;

$page = isset($_GET['page'])
        ? (int) $_GET['page']
        : 1;

if ($page < 1) {
    $page = 1;
}

$offset = ($page - 1) * $limit;

$sql = "SELECT *
        FROM students
        LIMIT $offset, $limit";

?>

The following example combines Previous, page numbers, active page, ellipsis, and Next navigation.

<nav
aria-label="Student records pagination">

    <ul class="pagination">


        <li class="page-item disabled"
        aria-disabled="true">

            <a
            class="page-link"
            href="#"
            aria-label="Previous">

            Previous

            </a>

        </li>


        <li
        class="page-item active"
        aria-current="page">

            <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 disabled"
        aria-disabled="true">

            <span class="page-link">
            ...
            </span>

        </li>


        <li class="page-item">

            <a
            class="page-link"
            href="#">

            10

            </a>

        </li>


        <li class="page-item">

            <a
            class="page-link"
            href="#"
            aria-label="Next">

            Next

            </a>

        </li>


    </ul>

</nav>