Cartzilla Buy now

Pagination

Indicate a series of related content exists across multiple pages.

Bootstrap docs

Basic example

<!-- Pagination: basic example -->
<ngb-pagination [collectionSize]="70" [(page)]="page" [directionLinks]="false"></ngb-pagination>

With icons

<!-- Pagination: with icons -->
<ngb-pagination [collectionSize]="70" [(page)]="page" aria-label="Default pagination"></ngb-pagination>
<ngb-pagination [collectionSize]="70" [(page)]="page" [boundaryLinks]="true"></ngb-pagination>

Sizing

<!-- Large size -->
<ngb-pagination class="pagination pagination-lg" [collectionSize]="70" [(page)]="page" aria-label="Default pagination"></ngb-pagination>

<!-- Normal size -->
<ngb-pagination class="pagination" [collectionSize]="70" [(page)]="page" aria-label="Default pagination"></ngb-pagination>

<!-- Small size -->
<ngb-pagination class="pagination pagination-sm" [collectionSize]="70" [(page)]="page" aria-label="Default pagination"></ngb-pagination>

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="fs-sm text-muted me-md-3">
      Showing 12 of 90 products
    </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 products
    </button type="button" class="btn btn-outline-primary btn-sm">
  </div>
</nav>

Entry navigation

<!-- Entry navigation -->
<nav class="entry-navigation" aria-label="Entry navigation example">
  <a href="#" class="entry-navigation-link">
    <i class="ci-arrow-left me-2"></i>
    <span class="d-none d-sm-inline">Prev post</span>
  </a>
  <a href="#" class="entry-navigation-link">
    <i class="ci-view-list me-2"></i>
    <span class="d-none d-sm-inline">All post</span>
  </a>
  <a href="#" class="entry-navigation-link">
    <span class="d-none d-sm-inline">Next post</span>
    <i class="ci-arrow-right ms-2"></i>
  </a>
</nav>
Top