Skip to main content

Bootstrap Pagination

Bootstrap Pagination

Pagination is a UI component used to navigate through multiple pages of content. Bootstrap offers a built-in pagination component that provides easy navigation for long lists or sets of data. Here's how to implement pagination with Bootstrap:

1. Basic Pagination

To create basic pagination, use the pagination class along with list items for each page:

<nav aria-label="Page navigation">
  <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 page-item class represents each individual page, and the page-link class is used for the pagination links.

2. Active State

Indicate the current page by adding the active class to the corresponding list item:

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

The active page should have the active class applied to its corresponding list item.

3. Disabled State

Disable navigation to previous or next pages by adding the disabled class to the corresponding list item:

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

The previous and next page links should have the disabled class applied to their corresponding list items when appropriate.

4. Sizing

You can adjust the size of pagination components by adding the pagination-lg or pagination-sm class to the pagination list:

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

Use pagination-lg for larger pagination and pagination-sm for smaller pagination.

5. Pagination with Icons

You can use icons instead of text for pagination by adding icon classes within pagination links:

<nav aria-label="Page navigation">
  <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="#"><i class="bi bi-chevron-right"></i></a></li>
  </ul>
</nav>

In this example, Bootstrap Icons are used for pagination.

6. Customizing Pagination

You can further customize pagination by applying additional styling or incorporating custom JavaScript functionality for advanced navigation.

Conclusion

Bootstrap provides a convenient and flexible way to implement pagination in your web projects. By following these guidelines and examples, you can create pagination components that enhance navigation and improve the user experience of your website or application.

Comments

Post a Comment