Skip to main content

Pagination's

A responsive, and flexible pagination's.

You can add the class is-active next to page-link to activate the button.

Also, you can add the class is-disabled to disable the prev or next button when you are on the first or last page. Also, you can add it to the page-link to disable the button.

Default pagination​

<nav class="pagination">
  <a class="page-prev is-disabled">
    <icon> Prev
  </a>
  <ul class="pages-list">
    <li>
      <a class="page-link is-active is-disabled">1</a>
    </li>
    <li>
      <a class="page-link">2</a>
    </li>
  </ul>
  <a class="page-next">
    Next page <icon>
  </a>
</nav>

Semi rounded pagination​

Just add the class is-rounded next to pagination class in tag nav.

<nav class="pagination is-rounded">
  ...
</nav>

Circle pagination​

Just add the class is-circle next to pagination class in tag nav.

<nav class="pagination is-circle">
  ...
</nav>

Group pagination​

Just add the class is-group next to pagination class in tag nav.

<nav class="pagination is-circle">
  ...
</nav>