Form Pager

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)

<!-- 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 {{ className([firstPage, 'disabled']) }}>
      <a href="#">
        Vorige
      </a>
    </li>
    <li {{ className([lastPage, 'disabled']) }}>
      <a href="#">
        Volgende
      </a>
    </li>
  </ul>
</nav>

<!-- Centered Disabled -->
<nav aria-label="Zoekresultaten pager">
  <ul class="pager">
    <li {{ className([firstPage, 'disabled']) }}>
      <a href="#">
        Vorige
      </a>
    </li>
    <li {{ className([lastPage, 'disabled']) }}>
      <a href="#">
        Volgende
      </a>
    </li>
  </ul>
</nav>

<!-- Aligned -->
<nav aria-label="Zoekresultaten pager">
  <ul class="pager">
    <li {{ className('previous', [firstPage, 'disabled']) }}>
      <a href="#">
        Vorige
      </a>
    </li>
    <li {{ className('next', [lastPage, 'disabled']) }}>
      <a href="#">
        Volgende
      </a>
    </li>
  </ul>
</nav>
/* Default */
__title: centered
/* Centered Disabled */
__title: centered with button disabled
firstPage: true
/* Aligned */
__title: aligned
lastPage: true