Pagination

<!-- 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="visually-hidden">(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.visually-hidden (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

<!-- 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="ai-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="visually-hidden">(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="ai-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.ai-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.visually-hidden (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.ai-chevron-right

<!-- 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) -->
<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="fs-sm text-muted me-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 type="button" class="btn btn-outline-primary btn-sm">
      Load more
    </button>
  </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.fs-sm.text-muted.me-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 -->
<nav class="d-flex justify-content-between py-3" aria-label="Entry navigation example">
  <a class="entry-nav me-3" href="#">
    <h3 class="h5 pb-sm-2">Prev post</h3>
    <div class="d-flex">
      <div class="entry-nav-thumb flex-shrink-0 d-none d-sm-block">
        <img class="rounded" src="path-to-image" alt="Post thumbnail"/>
      </div>
      <div class="ps-sm-3">
        <h4 class="nav-heading fs-md fw-medium mb-0">How technology affect our decisions</h4>
        <span class="fs-xs text-muted">by Jessica Miller</span>
      </div>
    </div>
  </a>
  <a class="entry-nav ms-3" href="#">
    <h3 class="h5 pb-sm-2 text-end">Next post</h3>
    <div class="d-flex">
      <div class="text-end pe-sm-3">
        <h4 class="nav-heading fs-md fw-medium mb-0">Open space - new trend in office design</h4>
        <span class="fs-xs text-muted">by Daniel Adams</span>
      </div>
      <div class="entry-nav-thumb flex-shrink-0 d-none d-sm-block">
        <img class="rounded" 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="#").entry-nav.me-3
    h3.h5.pb-sm-2 Prev post
    .d-flex
      .entry-nav-thumb.flex-shrink-0.d-none.d-sm-block
        img(src="img/blog/th04.jpg", alt="Post thumbnail").rounded
      .ps-sm-3
        h4.nav-heading.fs-md.fw-medium.mb-0 How technology affect our decisions
        span.fs-xs.text-muted by Jessica Miller
  a(href="#").entry-nav.ms-3
    h3.h5.pb-sm-2.text-end Next post
    .d-flex
      .text-end.pe-sm-3
        h4.nav-heading.fs-md.fw-medium.mb-0 Open space - new trend in office design
        span.fs-xs.text-muted by Daniel Adams
      .entry-nav-thumb.flex-shrink-0.d-none.d-sm-block
        img(src="img/blog/th05.jpg", alt="Post thumbnail").rounded