How to Create Pagination in Bootstrap: Simple Guide

To create pagination in Bootstrap, use the pagination class on a ul element and add page-item and page-link classes to li and a tags respectively. This structure creates a styled, responsive pagination bar easily.

Syntax

Bootstrap pagination uses a ul element with the class pagination. Each page number or control is an li with class page-item. Inside each li, an a tag with class page-link holds the clickable link or button.

• ul.pagination: Container for pagination items.
• li.page-item: Each page or control item.
• a.page-link: The clickable link inside each item.

html

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

Output

A horizontal pagination bar with page numbers 1, 2, and 3 as clickable links.

Example

This example shows a full pagination bar with previous and next buttons, and active and disabled states for better user experience.

html

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>

Output

A pagination bar with 'Previous' disabled, pages 1, 2 (active), 3, and 'Next' enabled as clickable links.

Common Pitfalls

Common mistakes include missing the page-item or page-link classes, which breaks the styling and functionality. Also, forgetting to add aria-current="page" on the active page hurts accessibility. Another error is not disabling the previous or next buttons when on the first or last page.

html

<!-- Wrong: Missing classes -->
<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
</ul>

<!-- Right: Proper classes and accessibility -->
<ul class="pagination">
  <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>
</ul>

Quick Reference

• Use ul.pagination as the container.
• Wrap each page number in li.page-item and a.page-link.
• Add active class and aria-current="page" to the current page.
• Add disabled class to non-clickable controls.
• Wrap pagination in a nav with aria-label for accessibility.

Key Takeaways

Use pagination, page-item, and page-link classes for proper Bootstrap pagination structure.

Mark the active page with active class and aria-current="page" for accessibility.

Disable previous or next buttons appropriately using the disabled class.

Wrap pagination in a nav element with an aria-label for screen readers.

Always test pagination on different screen sizes to ensure responsiveness.