bootstrap
  1. bootstrap-pagination
PreviousNext

Bootstrap Pagination

  • Bootstrap pagination is a user interface component that allows users to navigate through a set of pages.
  • It is a simple and effective way to break up large amounts of content into digestible chunks.

Syntax

To create a pagination component in Bootstrap, you need to use the following HTML code:

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Example

Here is an example of pagination with three pages and previous and next buttons.

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

Sizing

Fancy larger or smaller pagination

<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 active"><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">
  <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 active"><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>
Try Playground

Alignment

Change the alignment of pagination components with flexbox utilities.

<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"><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">
  <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 active"><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">
  <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 active"><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>
Try Playground

Explanation

In the code above, we used the following classes to create the pagination component:

  • pagination: this is the main class for pagination in Bootstrap.
  • page-item: this class is applied to each pagination button.
  • page-link: this class is applied to the link within each pagination button.
  • aria-label: this attribute provides a description for the pagination component for screen readers and other assistive technologies.

Use

Pagination is used to display a large set of data by breaking it up into smaller, more easily digestible chunks. It is commonly used on search result pages, news websites, and e-commerce websites.

Bootstrap makes it easy to create a pagination component that is both functional and visually appealing.

Important Points

  • Pagination is a useful user interface component that helps users navigate through large amounts of data.
  • Bootstrap provides a simple and effective way to create a pagination component.
  • The pagination class is used to create the pagination component, and the page-item and page-link classes are used for each pagination button.

Summary

Bootstrap pagination is a great way to make large sets of data more manageable for users. By using pagination, you can make it easier for users to find what they're looking for, and Bootstrap makes it easy to create a pagination component that is both functional and visually appealing.

OffcanvasPlaceholders
Published on: