Pagination

Pagination links indicate a series of related content exists across multiple pages.

Basic example

Simply use the following code to have a pagination.

<nav>
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#">
        <span class="ti-arrow-left"></span>
      </a>
    </li>
    <li class="page-item active">
      <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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="ti-arrow-right"></span>
      </a>
    </li>
  </ul>
</nav>
Markup
Copy

Alignment

Change the alignment of pagination components with flexbox utilities.

<nav>
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#">
        <span class="ti-arrow-left"></span>
      </a>
    </li>
    <li class="page-item active">
      <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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="ti-arrow-right"></span>
      </a>
    </li>
  </ul>
</nav>
Markup
Copy

Pager

We use buttons to create back/next type paginations.

<nav class="text-center mb-2">
  <a class="btn btn-w-md btn-light" href="#">Previous</a>
  <a class="btn btn-w-md btn-light" href="#">Next</a>
</nav>

<nav class="flexbox mb-2">
  <a class="btn btn-light" href="#">Older</a>
  <a class="btn btn-light" href="#">Newer</a>
</nav>

<nav class="flexbox mb-2">
  <a class="btn btn-light disabled" href="#">Older</a>
  <a class="btn btn-light" href="#">Newer</a>
</nav>

<nav class="flexbox mb-2">
  <a class="btn btn-round btn-light" href="#">Older</a>
  <a class="btn btn-round btn-light" href="#">Newer</a>
</nav>
Markup
Copy