Prev Next

BS5 Pagination

Bootstrap 5 Pagination components allow for easy navigation between pages of content. They are highly customizable and can include various styles and sizes.

Key Topics

Basic Pagination

The basic pagination component uses the .pagination class with nested <li> elements for individual page links.

<nav>
    <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="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>

Explanation: The .pagination class creates the pagination container, while .page-item and .page-link define individual pages and links.

Pagination Sizes

Use .pagination-lg or .pagination-sm to adjust the size of pagination components.

<nav>
    <ul class="pagination pagination-lg">
        <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>
</nav>

Explanation: Adding .pagination-lg or .pagination-sm resizes the pagination links for larger or smaller UI elements.

Pagination with Icons

Include icons from libraries like Font Awesome for a more intuitive navigation experience.

<nav>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#"><span aria-hidden="true">«</span> 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 <span aria-hidden="true">»</span></a></li>
    </ul>
</nav>

Explanation: Add icons for a visually appealing and intuitive navigation experience. Use appropriate ARIA attributes for accessibility.

Complete Pagination Example

Below is a full HTML page demonstrating basic, sized, and icon-enhanced pagination components.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Pagination Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Pagination</h2>

        <h3>Basic Pagination</h3>
        <nav>
            <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>
        </nav>

        <h3>Large Pagination</h3>
        <nav>
            <ul class="pagination pagination-lg">
                <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>
        </nav>

        <h3>Pagination with Icons</h3>
        <nav>
            <ul class="pagination">
                <li class="page-item"><a class="page-link" href="#"><span aria-hidden="true">«</span> 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 <span aria-hidden="true">»</span></a></li>
            </ul>
        </nav>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example includes standard pagination, larger links, and icon-enhanced navigation.

Key Takeaways

  • Bootstrap pagination is built using .pagination and .page-item classes.
  • Customize sizes with .pagination-lg or .pagination-sm.
  • Add icons and ARIA attributes for improved user experience and accessibility.
Prev Next