Basic Pagination in Bootstrap

Pagination is a navigation component used to divide content into pages, making it easier to navigate through large sets of items, such as search results, product listings, or articles. Bootstrap provides built-in classes to create a clean and functional pagination component.

1. Basic Pagination Structure

A basic pagination component in Bootstrap is created using an unordered list with the class pagination. Each page link is represented by a list item (<li>), with additional classes to style and position the pagination elements.

a. Basic Pagination Example

HTML Code:

<nav aria-label="Page navigation example">
  <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="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

• <nav aria-label="Page navigation example">: Wraps the pagination component and provides an accessible label for screen readers.
• <ul class="pagination">: Creates an unordered list with the pagination class for default styling.
• <li class="page-item">: Represents each pagination item.
• <a class="page-link" href="#">: Styles the pagination links.

2. Pagination States

Pagination components can have different states to indicate the current page or provide navigation cues.

a. Active State

The active state highlights the current page.

Example:

<nav aria-label="Page navigation example">
  <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 active" aria-current="page"><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="#">Next</a></li>
  </ul>
</nav>

• <li class="page-item active" aria-current="page">: Indicates the current page with the active class and aria-current="page" for accessibility.

b. Disabled State

The disabled state prevents interaction with pagination items that are not applicable (e.g., "Previous" on the first page).

Example:

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled"><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="#">Next</a></li>
  </ul>
</nav>

• <li class="page-item disabled">: Applies a disabled style to the pagination item.

3. Pagination Variants

Bootstrap provides different variants to customize the appearance of pagination components.

a. Pagination Size

Pagination can be styled with different sizes to fit various design requirements.

Example:

<nav aria-label="Page navigation example">
  <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="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

• .pagination-lg: Increases the size of the pagination component.

Example:

<nav aria-label="Page navigation example">
  <ul class="pagination pagination-sm">
    <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="#">Next</a></li>
  </ul>
</nav>

• .pagination-sm: Reduces the size of the pagination component.

b. Alignment

Pagination can be aligned to the left, center, or right.

Example:

<nav aria-label="Page navigation example">
  <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="#">Next</a></li>
  </ul>
</nav>

• .justify-content-center: Centers the pagination component within its container.

Example:

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <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="#">Next</a></li>
  </ul>
</nav>

• .justify-content-end: Aligns the pagination component to the right.

4. Using Pagination with Icons

You can use icons instead of text for pagination controls.

Example:

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-left"></i></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="#"><i class="bi bi-chevron-right"></i></a></li>
  </ul>
</nav>

• <i class="bi bi-chevron-left"></i>: Uses an icon for the "Previous" button (Bootstrap Icons).

5. Accessibility Considerations

Bootstrap pagination components include accessible features, such as:

• aria-label="Page navigation example": Provides a label for screen readers.
• aria-current="page": Indicates the current page.

Summary of Basic Pagination in Bootstrap

• Basic Structure: Use <nav>, <ul class="pagination">, and <li class="page-item"> to create pagination.
• Pagination States: Apply active for the current page and disabled for non-interactive items.
• Variants: Customize size (.pagination-lg, .pagination-sm) and alignment (.justify-content-center, .justify-content-end).
• Icons: Replace text with icons for pagination controls.
• Accessibility: Ensure pagination is accessible using aria-label and aria-current.