Soll der Benutzer durch eine Reihe von Pages, Screens oder Bildern geführt werden hilft die .pagination weiter. Die Klasse .active auf einem Listenelement zeigt an, auf welcher Seite sich der Benutzer gerade befindet. Sind Seiten inaktiv kann dem Listenelement die Klasse .disabled zugeordnet werden:

**Anmerkung:** Das Beispliel verwendet die Zentrierhelfer Komponente für die horizontale Ausrichtung
<div class="h-center">
  <ul class="pagination">
      <li><a href="#"><span class="sr-only">Seite 1</span></a></li>
      <li><a href="#"><span class="sr-only">Seite 2</span></a></li>
      <li><a href="#"><span class="sr-only">Seite 3</span></a></li>
      <li class="active"><a href="#"><span class="sr-only">Seite 4 aktiv</span></a></li>
      <li><a href="#"><span class="sr-only">Seite 5</span></a></li>
      <li><a href="#"><span class="sr-only">Seite 6</span></a></li>
      <li><a href="#"><span class="sr-only">Seite 7</span></a></li>
      <li class="disabled" role="presentation"><a href="#"><span class="sr-only">Seite 8 inaktiv</span></a></li>
      <li class="disabled" role="presentation"><a href="#"><span class="sr-only">Seite 9 inaktiv</span></a></li>
  </ul>
</div>