• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Pagination

← Previous Next →

Pagination is an essential component in web design for dividing large amounts of content into manageable pages. It improves the user experience by reducing page load times, organizing information, and guiding users through multiple pages of content. Bootstrap 4 provides an easy and flexible way to create responsive, stylish pagination controls. This tutorial will cover everything from basic usage to advanced customization and best practices.

What Is Pagination?

Pagination is a navigational element that allows users to move between pages of content, such as blog posts, product listings, search results, or tables. Instead of showing all content at once, pagination splits content into discrete pages and provides numbered or labeled links for navigation.

In Bootstrap 4, pagination is created using the .pagination class and list elements (<ul> and <li>) with links (<a>).

Basic Pagination

The simplest pagination consists of a <ul> element with the .pagination class and <li> elements with the .page-item class. Each link uses the .page-link class.

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

In this example, users can navigate between three pages, with Previous and Next links for sequential movement.

Active and Disabled States

Bootstrap 4 supports active and disabled states for pagination items. Use .active to indicate the current page and .disabled to prevent interaction with unavailable links.

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

The active page is highlighted, and disabled links cannot be clicked, improving usability and accessibility.

Pagination Sizes

Bootstrap 4 allows you to change the size of pagination links using .pagination-lg for large and .pagination-sm for small pagination.

<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="#">Next</a></li>
</ul>

<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="#">Next</a></li>
</ul>

Sizing helps match pagination to the context, such as a table, card, or compact layout.

Alignment Options

Pagination can be aligned to the left, center, or right using utility classes:

  • .justify-content-start – left alignment

  • .justify-content-center – center alignment

  • .justify-content-end – right alignment

<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="#">Next</a></li>
</ul>

This ensures pagination is visually consistent with your page layout.

Pagination with Icons

Sometimes, you may want to use icons instead of text for Previous and Next links. This is commonly done with Font Awesome or similar icon libraries.

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#"><i class="fas fa-chevron-left"></i></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="#"><i class="fas fa-chevron-right"></i></a></li>
</ul>

Icons provide a sleek, modern appearance and reduce text clutter.

Pagination with Ellipsis

For long paginated content, it is common to show only a few page numbers with ellipsis (...) to indicate hidden pages. Use .disabled to create the ellipsis.

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item disabled"><a class="page-link" href="#">...</a></li>
  <li class="page-item"><a class="page-link" href="#">5</a></li>
  <li class="page-item"><a class="page-link" href="#">6</a></li>
  <li class="page-item active"><a class="page-link" href="#">7</a></li>
  <li class="page-item"><a class="page-link" href="#">8</a></li>
  <li class="page-item disabled"><a class="page-link" href="#">...</a></li>
  <li class="page-item"><a class="page-link" href="#">12</a></li>
</ul>

This keeps pagination clean while still providing access to all pages.

Accessibility Considerations

Pagination should be accessible:

  • Use <nav> with aria-label="Page navigation" around the <ul>

  • Use .page-item.disabled for unclickable links

  • Ensure the current page has .active and screen reader friendly text

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1 <span class="sr-only">(current)</span></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>

Best Practices

  1. Limit the number of visible page links to avoid clutter.

  2. Use active and disabled states clearly to guide users.

  3. Align pagination according to page layout for better aesthetics.

  4. Combine text and icons for intuitive navigation.

  5. Ensure accessibility for screen readers.

Practical Examples

  • Blog: Navigate between multiple blog post pages.

  • E-commerce: Move through product listing pages.

  • Search Results: Navigate search results pages efficiently.

  • Tables: Paginate long tables to reduce scrolling.

  • Dashboards: Use small pagination for cards or widget navigation.

Summary of the Tutorial

Bootstrap 4 pagination is a flexible and responsive component for managing multi-page content. You can create simple numbered pagination, add active and disabled states, adjust sizes, align them, and include icons or ellipses. By using pagination correctly, you can improve usability, organize content effectively, and provide a professional, intuitive navigation experience for users.

Practice Questions

  1. Create a basic pagination with 5 pages, including “Previous” and “Next” links.

  2. Create a pagination where the third page is active and the “Previous” link is enabled.

  3. Create a pagination where the first page is active and the “Previous” link is disabled.

  4. Create a large pagination using .pagination-lg with 4 pages and active state on page 2.

  5. Create a small pagination using .pagination-sm with 3 pages and active state on page 1.

  6. Center-align a pagination with 6 pages using .justify-content-center.

  7. Right-align a pagination with 4 pages using .justify-content-end.

  8. Create a pagination with icons for “Previous” and “Next” using Font Awesome chevrons.

  9. Create a pagination with ellipses to indicate skipped pages, e.g., show pages 1, ..., 5, 6, 7, ..., 12.

  10. Create an accessible pagination using <nav aria-label="Page navigation"> and add .sr-only text for the current page.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top