Pagination Sizes and Alignment in Bootstrap

Bootstrap's pagination component is highly customizable, allowing you to adjust the size and alignment to fit different design needs. This flexibility helps you integrate pagination seamlessly into your layout while maintaining a consistent and user-friendly interface.

1. Pagination Sizes

Bootstrap provides classes to adjust the size of the pagination component, making it suitable for various design contexts.

a. Default Size

By default, pagination items are of a standard size. This is suitable for most designs and does not require additional sizing classes.

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

• Default Pagination: Uses the default size with no additional size classes.

b. Large Pagination

To make pagination items larger, use the .pagination-lg class. This is useful for improving visibility or when used in larger UI contexts.

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 pagination items, making them larger and more prominent.

c. Small Pagination

For a more compact pagination, use the .pagination-sm class. This is ideal for smaller UI elements or when space is limited.

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 pagination items for a more compact appearance.

2. Pagination Alignment

Pagination alignment classes in Bootstrap allow you to control the positioning of the pagination component within its container.

a. Center Alignment

To center-align pagination within its container, use the .justify-content-center class.

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 horizontally within its container.

b. Right Alignment

To right-align pagination, use the .justify-content-end class.

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 within its container.

c. Left Alignment

Pagination is left-aligned by default. If needed, you can explicitly set this alignment using .justify-content-start.

Example:

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-start">
    <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-start: Ensures the pagination component is aligned to the left within its container.

Summary of Pagination Sizes and Alignment in Bootstrap

• Sizes:

  • Default: Standard size with no additional class.
  • Large: Use .pagination-lg to increase the size.
  • Small: Use .pagination-sm for a smaller, more compact appearance.

• Alignment:

  • Center: Use .justify-content-center to center the pagination.
  • Right: Use .justify-content-end to align the pagination to the right.
  • Left: Default alignment or use .justify-content-start for left alignment.