Pagination

Indicate the current page within a multi-page set using the .velin-pagination component.

Basic pagination

<nav aria-label="Page navigation">
  <ul class="velin-pagination">
    <li class="velin-page-item"><a class="velin-page-link" href="#">&laquo;</a></li>
    <li class="velin-page-item"><a class="velin-page-link" href="#">1</a></li>
    <li class="velin-page-item active" aria-current="page"><a class="velin-page-link" href="#">2</a></li>
    <li class="velin-page-item"><a class="velin-page-link" href="#">3</a></li>
    <li class="velin-page-item"><a class="velin-page-link" href="#">&raquo;</a></li>
  </ul>
</nav>

Disabled links

Add .disabled to a page item to prevent interaction (e.g. on the first/last page).

<li class="velin-page-item disabled">
  <span class="velin-page-link">&laquo;</span>
</li>

Sizes

Use .velin-pagination-sm or .velin-pagination-lg for smaller or larger pagination.

<ul class="velin-pagination velin-pagination-sm">…</ul>
<ul class="velin-pagination velin-pagination-lg">…</ul>

Simple pagination

A minimal previous/next pattern using just two links.

<nav aria-label="Simple pagination" class="d-flex justify-content-between">
  <a href="#" class="velin-btn velin-btn-outline-primary">&larr; Previous</a>
  <a href="#" class="velin-btn velin-btn-outline-primary">Next &rarr;</a>
</nav>