Bootstrap Pagination

When a website has more content than fits comfortably on one screen, you can split it across several pages. Bootstrap Pagination gives you a ready-made row of numbered links so visitors can jump between those pages. It is one of the easiest Bootstrap components to build because it is made from ordinary HTML lists dressed up with a few classes.

What is pagination?

Pagination is the strip of links you often see at the bottom of blog archives, search results, or product listings, usually looking like "Previous 1 2 3 Next". In Bootstrap you build it from an unordered list. The <ul> gets the class .pagination, and every <li> inside it gets the class .page-item. The clickable link inside each item gets the class .page-link.

A basic pagination bar

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<nav aria-label="Page navigation">
  <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>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Notice that we wrapped the list in a <nav> element with an aria-label. This is not required for the styling to work, but it tells screen readers that this block of links is a navigation area, which makes your page more accessible.

Active and disabled states

Two extra classes let you show the visitor where they are. Add .active to the .page-item for the page currently being viewed, and add .disabled to any item that should not be clickable (for example a "Previous" link when you are already on the first page).

Highlighting the current page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Note: The active item is given aria-current="page" so that assistive technology announces it as the current page. It is a small detail, but it makes a real difference for people using screen readers.

Sizing and alignment

You can make the whole pagination bar larger or smaller by adding a sizing class to the <ul>, and you can move it left, center, or right using Bootstrap's flex utility classes because .pagination is built with flexbox.

  • .pagination-lg makes the links bigger, good for touch screens.
  • .pagination-sm makes the links smaller and more compact.
  • Add .justify-content-center to center the bar.
  • Add .justify-content-end to push the bar to the right.

A large, centered pagination bar

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<nav aria-label="Page navigation">
  <ul class="pagination pagination-lg justify-content-center">
    <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>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Common pagination classes

ClassApplied toWhat it does
.pagination<ul>Turns the list into a pagination bar
.page-item<li>Styles each list item as a page slot
.page-link<a>Styles the clickable link inside an item
.active<li>Marks the current page
.disabled<li>Makes an item unclickable and greyed out
.pagination-sm / .pagination-lg<ul>Shrinks or enlarges the bar

Exercise: Bootstrap Pagination

What is the correct base markup structure for Bootstrap pagination?

Keep Going

Bootstrap Interview QuestionsPractice real questions asked for BootstrapFrontend Developer SalarySee what Frontend Developer roles pay in the marketAuto Apply for JobsApply to open roles related to Bootstrap and tweak your resume