PhilBranding Phillip Mudavanhu UX Designer Logo Designer Buy now

Pagination

Indicate a series of related content exists across multiple pages.

Bootstrap docs

Basic example

<!-- Pagination: basic example -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link">Prev</a>
    </li>
    <li class="page-item d-sm-none">
      <span class="page-link page-link-static">2 / 5</span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">1</a>
    </li>
    <li class="page-item active d-none d-sm-block" aria-current="page">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">3</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">4</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">5</a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link">Next</a>
    </li>
  </ul>
</nav>
// Pagination: basic example
nav(aria-label="Page navigation example")
  ul.pagination
    li.page-item
      a.page-link(href="#") Prev
    li.page-item.d-sm-none
      span.page-link.page-link-static 2 / 5
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 1
    li.page-item.active.d-none.d-sm-block(aria-current="page")
      span.page-link
        | 2
        span.sr-only (current)
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 3
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 4
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 5
    li.page-item
      a.page-link(href="#") Next

With icons

<!-- Pagination: with icons -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Previous">
        <i class="fe-chevron-left"></i>
      </a>
    </li>
    <li class="page-item d-sm-none">
      <span class="page-link page-link-static">2 / 5</span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">1</a>
    </li>
    <li class="page-item active d-none d-sm-block" aria-current="page">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">3</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">4</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">5</a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Next">
        <i class="fe-chevron-right"></i>
      </a>
    </li>
  </ul>
</nav>
// Pagination: with icons
nav(aria-label="Page navigation example")
  ul.pagination
    li.page-item
      a.page-link(href="#" aria-label="Previous")
        i.fe-chevron-left
    li.page-item.d-sm-none
      span.page-link.page-link-static 2 / 5
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 1
    li.page-item.active.d-none.d-sm-block(aria-current="page")
      span.page-link
        | 2
        span.sr-only (current)
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 3
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 4
    li.page-item.d-none.d-sm-block
      a.page-link(href="#") 5
    li.page-item
      a.page-link(href="#" aria-label="Next")
        i.fe-chevron-right

Sizing

<!-- Large size -->
<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <!-- Page links -->
  </ul>
</nav>

<!-- Normal size -->
<nav aria-label="...">
  <ul class="pagination">
    <!-- Page links -->
  </ul>
</nav>

<!-- Small size -->
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <!-- Page links -->
  </ul>
</nav>
// Large size
nav(aria-label="...")
  ul.pagination.pagination-lg
    //- Page links

// Normal size
nav(aria-label="...")
  ul.pagination
    //- Page links

// Small size
nav(aria-label="...")
  ul.pagination.pagination-sm
    //- Page links

Load more (One-page)

<!-- Load more (One-page) -->
<nav class="d-md-flex justify-content-between align-items-center text-center text-md-left" aria-label="...">
  <div class="d-md-flex align-items-center w-100">
    <span class="font-size-sm text-muted mr-md-3">
      Showing 12 of 90 items
    </span>
    <div class="progress w-100 my-3 mx-auto mx-md-0" style="max-width: 10rem; height: 4px;">
      <div class="progress-bar" role="progressbar" style="width: 18%;" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <button>
      Load more
    </button type="button" class="btn btn-outline-primary btn-sm">
  </div>
</nav>
// Load more (One-page)
nav.d-md-flex.justify-content-between.align-items-center.text-center.text-md-left(aria-label="Page navigation")
  .d-md-flex.align-items-center.w-100
    span.font-size-sm.text-muted.mr-md-3 Showing 12 of 90 items
    .progress.w-100.my-3.mx-auto.mx-md-0(style="max-width: 10rem; height: 4px;")
      .progress-bar(role="progressbar", style="width: 18%;", aria-valuenow="18", aria-valuemin="0", aria-valuemax="100")
  button(type="button").btn.btn-outline-primary.btn-sm
    | Load more

Entry navigation

<!-- Entry navigation -->
<nav class="d-flex justify-content-between py-3" aria-label="Entry navigation example">
  <a class="cs-entry-nav mr-3" href="#">
    <h3 class="h5 pb-sm-2">Prev post</h3>
    <div class="media">
      <div class="cs-entry-nav-thumb d-none d-sm-block">
        <img src="path-to-image" alt="Post thumbnail"/>
      </div>
      <div class="media-body pl-sm-3">
        <h4 class="nav-heading font-size-md font-weight-medium mb-0">How technology affect our decisions</h4>
        <span class="font-size-xs text-muted">by Jessica Miller</span>
      </div>
    </div>
  </a>
  <a class="cs-entry-nav ml-3" href="#">
    <h3 class="h5 pb-sm-2 text-right">Next post</h3>
    <div class="media">
      <div class="media-body text-right pr-sm-3">
        <h4 class="nav-heading font-size-md font-weight-medium mb-0">Open space - new trend in office design</h4>
        <span class="font-size-xs text-muted">by Daniel Adams</span>
      </div>
      <div class="cs-entry-nav-thumb d-none d-sm-block">
        <img src="path-to-image" alt="Post thumbnail"/>
      </div>
    </div>
  </a>
</nav>
// Entry navigation
nav(aria-label="Entry navigation example").d-flex.justify-content-between.py-3
  a(href="#").cs-entry-nav.mr-3
    h3.h5.pb-sm-2 Prev post
    .media
      .cs-entry-nav-thumb.d-none.d-sm-block
        +image("path-to-image", "Post thumbnail")
      .media-body.pl-sm-3
        h4.nav-heading.font-size-md.font-weight-medium.mb-0 How technology affect our decisions
        span.font-size-xs.text-muted by Jessica Miller
  a(href="#").cs-entry-nav.ml-3
    h3.h5.pb-sm-2.text-right Next post
    .media
      .media-body.text-right.pr-sm-3
        h4.nav-heading.font-size-md.font-weight-medium.mb-0 Open space - new trend in office design
        span.font-size-xs.text-muted by Daniel Adams
      .cs-entry-nav-thumb.d-none.d-sm-block
        +image("path-to-image", "Post thumbnail")
Top