Bootstrap - Pagination

Bootstrap Pagination Basics

To include Bootstrap pagination in your project, you first need to set up Bootstrap. Once you have Bootstrap included, you can start using the pagination component.

The structure of a Bootstrap pagination consists of an unordered list (<ul>) with the class .pagination. Inside the list, each pagination item is a list item (<li>) containing an anchor (<a>) element. The anchor element holds the page number or a control symbol, such as "Previous" or "Next".

<ul class="pagination">
  <li><a href="#">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">Next</a></li>
</ul>

Bootstrap provides classes to style and control the pagination. The .active class indicates the current page, while the .disabled class displays a link as disabled and unclickable.

<ul class="pagination">
  <li class="disabled"><a href="#">Previous</a></li>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">Next</a></li>
</ul>

Bootstrap also offers pagination sizing options. By adding the .pagination-lg or .pagination-sm class to the .pagination element, you can increase or decrease the size of the pagination items.

<ul class="pagination pagination-lg">
  ...
</ul>

<ul class="pagination pagination-sm">
  ...
</ul>

With these pagination classes and options, you can create functional and appealing pagination for your web pages. Bootstrap handles the styling and responsiveness, allowing you to focus on the structure and behavior of your pagination component.

Pagination Alignment

Bootstrap makes it easy to align pagination to the left, center, or right of its container. This allows you to match your pagination placement with the overall design and layout of your web page.

To align pagination, you can use Bootstrap's flex utilities. Flexbox is a layout system that lets you control the alignment and distribution of elements within a container.

To align pagination to the left (which is the default), you need to place the pagination inside a container without any additional classes.

<div>
  <ul class="pagination">
    ...
  </ul>
</div>

To center the pagination, add the .justify-content-center class to the container. This class uses flexbox to center the pagination horizontally.

<div class="justify-content-center">
  <ul class="pagination">
    ...
  </ul>
</div>

To align the pagination to the right, you can use the .justify-content-end class on the container. This class pushes the pagination to the right edge of the container.

<div class="justify-content-end">
  <ul class="pagination">
    ...
  </ul>
</div>

By using Bootstrap's flex utilities, you have control over the alignment of your pagination. This allows you to create appealing and organized layouts that match your design requirements.

You can also combine pagination alignment with other Bootstrap classes and components to create more complex and responsive layouts. Bootstrap's flex utilities work with other parts of the framework, giving you a cohesive and efficient way to build your web pages.

Pagination States and Styles

Bootstrap provides classes to show the state of pagination items, such as active and disabled states. The .active class highlights the current page, while the .disabled class shows a link as disabled and unclickable.

To apply the active state, add the .active class to the <li> element that represents the current page. This will change the background color and text color of the pagination item to show it as active.

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

To display a pagination item as disabled, add the .disabled class to the <li> element. This will change the text color and pointer events to show the item as unclickable.

<ul class="pagination">
  <li class="disabled"><a href="#">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">Next</a></li>
</ul>

In addition to states, you can customize the styles of pagination items using Bootstrap's classes. For example, you can change the background color, text color, or border of pagination items by adding classes like .bg-*, .text-*, or .border-* to the <li> or <a> elements.

<ul class="pagination">
  <li class="bg-info"><a href="#" class="text-white">1</a></li>
  <li><a href="#" class="border-dark">2</a></li>
  <li><a href="#" class="text-danger">3</a></li>
</ul>

You can also combine pagination with other Bootstrap components to create more advanced and interactive pagination. For instance, you can nest pagination inside a Bootstrap navbar or use it with breadcrumbs for better navigation.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">
      <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>
    </li>
  </ol>
</nav>

Pagination with Icons

Bootstrap lets you add icons to your pagination links to make them more visually appealing and intuitive. Icons can help users understand the purpose of each link, especially for controls like "Previous" and "Next".

To add icons to your pagination links, you can use Bootstrap's Glyphicons or any custom icon font. Glyphicons are a set of icons that come with Bootstrap, while custom icon fonts like Font Awesome offer a wider variety of icons.

To use Glyphicons in your pagination, you need to include the right class for the desired icon inside the <a> element of the pagination item.

<ul class="pagination">
  <li><a href="#"><span class="glyphicon glyphicon-chevron-left"></span> Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">Next <span class="glyphicon glyphicon-chevron-right"></span></a></li>
</ul>

If you prefer to use a custom icon font, you'll need to include the icon font library in your project and then use the right classes for the desired icons.

<ul class="pagination">
  <li><a href="#"><i class="fa fa-arrow-left"></i> Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">Next <i class="fa fa-arrow-right"></i></a></li>
</ul>

When using icons in your pagination, consider the readability and accessibility of your links. Make sure the icons are clearly visible and do not interfere with the text. Also, include text along with the icons to ensure that users who may not be able to see the icons can still understand the purpose of each link.

By adding icons to your pagination links, you can improve the user experience and make your web pages more visually appealing. Bootstrap's Glyphicons and support for custom icon fonts give you the flexibility to choose the icons that best fit your design and functionality needs.

Responsive Pagination

Bootstrap makes it simple to optimize your pagination for different screen sizes, so your web pages look great and work well across various devices. By using Bootstrap's responsive utility classes, you can customize the appearance and behavior of your pagination component to adapt to different screen widths.

One common challenge with pagination on smaller screens is the limited space available. When there are many pages, the pagination can become too long and may not fit comfortably on smaller devices. To fix this issue, you can collapse the pagination on smaller screens and provide alternative navigation options.

Bootstrap offers responsive utility classes that you can apply to your pagination to control its visibility and layout based on the screen size.

<ul class="pagination">
  <li><a href="#" class="visible-sm visible-md visible-lg">Previous</a></li>
  <li><a href="#" class="visible-xs">Prev</a></li>
  <li><a href="#" class="hidden-xs">1</a></li>
  <li><a href="#" class="hidden-xs">2</a></li>
  <li><a href="#" class="hidden-xs">3</a></li>
  <li><a href="#" class="visible-xs">...</a></li>
  <li><a href="#" class="visible-xs">10</a></li>
  <li><a href="#" class="visible-sm visible-md visible-lg">Next</a></li>
  <li><a href="#" class="visible-xs">Next</a></li>
</ul>

The "Previous" and "Next" links are shown in full on larger screens (.visible-sm, .visible-md, .visible-lg) but are shortened to "Prev" and "Next" on extra small screens (.visible-xs). The numbered links are hidden on extra small screens (.hidden-xs), and an ellipsis (...) is shown instead to indicate that there are more pages available.

Another approach to handle pagination on smaller screens is to use Bootstrap's responsive utility classes to adjust the pagination's layout and alignment. You can combine the responsive classes with the pagination alignment classes to create a responsive and visually appealing pagination component.

<div class="row">
  <div class="col-xs-12 col-sm-6">
    <ul class="pagination pagination-sm visible-xs">
      ...
    </ul>
    <ul class="pagination hidden-xs">
      ...
    </ul>
  </div>
  <div class="col-xs-12 col-sm-6">
    <div class="text-right">
      <ul class="pagination pagination-sm visible-xs">
        ...
      </ul>
      <ul class="pagination hidden-xs">
        ...
      </ul>
    </div>
  </div>
</div>

The pagination is split into two columns on larger screens (.col-sm-6), with one column aligned to the left and the other to the right. On extra small screens (.col-xs-12), the pagination takes up the full width of the screen. The .pagination-sm class is used to make the pagination smaller on extra small screens, while the regular pagination size is used on larger screens.

By using Bootstrap's responsive utility classes, you can create pagination that adapts to different screen sizes and provides an optimal user experience across devices. You can choose to collapse the pagination, adjust its layout, or use a combination of both. Bootstrap gives you the tools to build responsive and user-friendly pagination components.