Pager

<!-- Default -->
<nav aria-label="Zoekresultaten pager">
    <ul class="pager">
        <li>
            <a href="#">
                Vorige
            </a>
        </li>
        <li>
            <a href="#">
                Volgende
            </a>
        </li>
    </ul>
</nav>

<!-- Centered Disabled -->
<nav aria-label="Zoekresultaten pager">
    <ul class="pager">
        <li class="disabled">
            <a href="#">
                Vorige
            </a>
        </li>
        <li>
            <a href="#">
                Volgende
            </a>
        </li>
    </ul>
</nav>

<!-- Aligned -->
<nav aria-label="Zoekresultaten pager">
    <ul class="pager">
        <li class="previous">
            <a href="#">
                Vorige
            </a>
        </li>
        <li class="next disabled">
            <a href="#">
                Volgende
            </a>
        </li>
    </ul>
</nav>

<!-- Default -->
<nav aria-label="Zoekresultaten pager">
  <ul class="pager">
    <li{{#if firstPage}} class="disabled"{{/if}}>
      <a href="#">
        Vorige
      </a>
    </li>
    <li{{#if lastPage}} class="disabled"{{/if}}>
      <a href="#">
        Volgende
      </a>
    </li>
  </ul>
</nav>

<!-- Centered Disabled -->
<nav aria-label="Zoekresultaten pager">
  <ul class="pager">
    <li{{#if firstPage}} class="disabled"{{/if}}>
      <a href="#">
        Vorige
      </a>
    </li>
    <li{{#if lastPage}} class="disabled"{{/if}}>
      <a href="#">
        Volgende
      </a>
    </li>
  </ul>
</nav>

<!-- Aligned -->
<nav aria-label="Zoekresultaten pager">
  <ul class="pager">
    <li class="previous{{#if firstPage}} disabled{{/if}}">
      <a href="#">
        Vorige
      </a>
    </li>
    <li class="next{{#if lastPage}} disabled{{/if}}">
      <a href="#">
        Volgende
      </a>
    </li>
  </ul>
</nav>
/* Default: No context defined */

/* Centered Disabled */
firstPage: true


/* Aligned */
lastPage: true


Standaard worden de knoppen gecentreerd. Wil je ze aan de zijkant uitlijnen, dan dien je .previous en .next te plaatsen op de li's.

Een pager is navigatie. Om de Bootstrap documentatie te citeren:

Labelling the pagination component

The pagination component should be wrapped in a

(https://getbootstrap.com/docs/3.3/components/#callout-pagination-label)