---
layout: documentation
doc-tab: components
doc-subtab: pagination
---

{% include subnav-components.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Pagination</h1>
    <h2 class="subtitle">A responsive, usable, and flexible <strong>pagination</strong></h2>

    <hr>

    <div class="example">
      <nav class="pagination">
        <a class="button">Previous</a>
        <a class="button">Next page</a>
        <ul>
          <li>
            <a class="button">1</a>
          </li>
          <li>
            <span>...</span>
          </li>
          <li>
            <a class="button">45</a>
          </li>
          <li>
            <a class="button is-primary">46</a>
          </li>
          <li>
            <a class="button">47</a>
          </li>
          <li>
            <span>...</span>
          </li>
          <li>
            <a class="button">86</a>
          </li>
        </ul>
      </nav>
    </div>
{% highlight html %}
<nav class="pagination">
  <a class="button">Previous</a>
  <a class="button">Next page</a>
  <ul>
    <li>
      <a class="button">1</a>
    </li>
    <li>
      <span>...</span>
    </li>
    <li>
      <a class="button">45</a>
    </li>
    <li>
      <a class="button is-primary">46</a>
    </li>
    <li>
      <a class="button">47</a>
    </li>
    <li>
      <span>...</span>
    </li>
    <li>
      <a class="button">86</a>
    </li>
  </ul>
</nav>
{% endhighlight %}
  </div>
</section>