Zeitleisten, Assistenten und Schritt-für-Schritt-Fortschrittsanzeigen – ideal für Warenkörbe, Registrierungen und ähnliche Abläufe.

Der Stepper basiert auf CSS Grid und einer geordneten Liste (<ol>). Standardmäßig stehen die Schritte untereinander; mit Modifier-Klassen machst du daraus – auch responsiv – eine horizontale Leiste.

• Einfaches Markup:.stepper am <ol>, .stepper-item an jedem Schritt, .active für erledigte bzw. aktuelle Schritte.
• Horizontal und responsiv:.stepper-horizontal oder z. B. .sm:stepper-horizontal über Container Queries.
• Farbvarianten: Theme-Klassen wie .theme-success pro Schritt.
• Überlauf:.stepper-overflow macht lange Stepper horizontal scrollbar.
• Flexibler Inhalt: Beschreibungen, Badges oder Links statt reiner Beschriftung.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Beispiele

Basis

Ein einfacher vertikaler Stepper. Erledigte Schritte erhalten .active.

<ol class="stepper">
  <li class="stepper-item active">Konto anlegen</li>
  <li class="stepper-item active">E-Mail bestätigen</li>
  <li class="stepper-item">Profil aktualisieren</li>
  <li class="stepper-item">Fertig</li>
</ol>

Responsiv

Ab einem bestimmten Breakpoint wird der Stepper horizontal: Setze contains-inline an ein Elternelement und die responsive Klasse .{breakpoint}:stepper-horizontal an den Stepper. Das zusätzliche Elternelement ist für die Container Queries nötig.

<div class="contains-inline">
  <ol class="stepper sm:stepper-horizontal">
    <li class="stepper-item active">Konto anlegen</li>
    <li class="stepper-item active">E-Mail bestätigen</li>
    <li class="stepper-item">Profil aktualisieren</li>
    <li class="stepper-item">Fertig</li>
  </ol>
</div>

Abstand

Den Abstand zwischen den Schritten passt du über die CSS-Variable --bs-stepper-gap an.

<ol class="stepper" style="--bs-stepper-gap: 3rem">
  <li class="stepper-item active">Konto anlegen</li>
  <li class="stepper-item active">E-Mail bestätigen</li>
  <li class="stepper-item">Profil aktualisieren</li>
  <li class="stepper-item">Fertig</li>
</ol>

Varianten

Mit Theme-Klassen wie .theme-accent, .theme-success oder .theme-danger färbst du einzelne Schritte ein.

<ol class="stepper stepper-horizontal">
  <li class="stepper-item active theme-accent">Konto anlegen</li>
  <li class="stepper-item">E-Mail bestätigen</li>
  <li class="stepper-item active theme-success">Profil aktualisieren</li>
  <li class="stepper-item active theme-danger">Fertig</li>
</ol>

Überlauf

Packe einen horizontalen Stepper in .stepper-overflow, damit er horizontal scrollt, wenn er breiter als sein Elternelement wird. Der Wrapper nutzt container-type: inline-size, reagiert also auf die Containerbreite statt auf den Viewport.

<div class="stepper-overflow">
  <ol class="stepper stepper-horizontal">
    <li class="stepper-item active">Konto anlegen</li>
    <li class="stepper-item active">E-Mail-Adresse bestätigen</li>
    <li class="stepper-item">Profil vollständig einrichten</li>
    <li class="stepper-item">Zahlungsmethode hinzufügen</li>
    <li class="stepper-item">Prüfen und bestätigen</li>
    <li class="stepper-item">Onboarding abschließen</li>
  </ol>
</div>

Komplexe Inhalte

Neben der Beschriftung kannst du jedem Schritt weitere Inhalte mitgeben – Beschreibungen, Hinweise, Statusanzeigen oder dekorative Elemente.

<ol class="stepper stepper-vertical">
  <li class="stepper-item align-items-start active">
    <div class="pt-1">
      <div class="fw-semibold">Anlegen</div>
      <small class="fg-3">Lege ein Konto an.</small>
    </div>
  </li>
  <li class="stepper-item align-items-start active">
    <div class="pt-1">
      <div class="fw-semibold">Bestätigen</div>
      <small class="fg-3">Bestätige deine E-Mail-Adresse.</small>
    </div>
  </li>
  <li class="stepper-item align-items-start">
    <div class="pt-1">
      <div class="fw-semibold">Einrichten</div>
      <small class="fg-3">Richte dein Profil ein.</small>
    </div>
  </li>
  <li class="stepper-item align-items-start">
    <div class="pt-1">
      <div class="fw-semibold">Fertig</div>
      <small class="fg-3">Willkommen an Bord!</small>
    </div>
  </li>
</ol>

Kombiniere den Stepper mit anderen Komponenten wie Badges und den Theme-Helfern für individuellere Varianten.

<ol class="stepper stepper-horizontal w-100">
  <li class="stepper-item theme-success active">
    <div>
      <div>Konto anlegen</div>
      <div class="badge badge-subtle">Erledigt</div>
    </div>
  </li>
  <li class="stepper-item theme-success active">
    <div>
      <div>E-Mail bestätigen</div>
      <div class="badge badge-subtle">Erledigt</div>
    </div>
  </li>
  <li class="stepper-item theme-primary active">
    <div>
      <div>Profil aktualisieren</div>
      <div class="badge badge-subtle">In Arbeit</div>
    </div>
  </li>
  <li class="stepper-item theme-secondary">
    <div>
      <div>Fertig</div>
      <div class="badge badge-subtle">Ausstehend</div>
    </div>
  </li>
</ol>

Ausrichtung

Da der Stepper display: inline-grid nutzt, richtest du ihn mit den Textausrichtungs-Utilities am Elternelement aus. Das Inline-Grid hält alle Schritte gleich breit und sorgt für korrekte Verbindungslinien.

<ol class="stepper stepper-horizontal">
  <li class="stepper-item active">Standard-Stepper</li>
  <li class="stepper-item active">E-Mail bestätigen</li>
  <li class="stepper-item">Profil aktualisieren</li>
  <li class="stepper-item">Fertig</li>
</ol>

<div class="text-center">
  <ol class="stepper stepper-horizontal">
    <li class="stepper-item active">Zentrierter Stepper</li>
    <li class="stepper-item active">E-Mail bestätigen</li>
    <li class="stepper-item">Profil aktualisieren</li>
    <li class="stepper-item">Fertig</li>
  </ol>
</div>

<div class="text-end">
  <ol class="stepper stepper-horizontal">
    <li class="stepper-item active">Stepper am Ende</li>
    <li class="stepper-item active">E-Mail bestätigen</li>
    <li class="stepper-item">Profil aktualisieren</li>
    <li class="stepper-item">Fertig</li>
  </ol>
</div>

Mit .w-100 wird der Stepper volle Breite, die Schritte strecken sich gleichmäßig. Die Ausrichtung spielt dann keine Rolle mehr.

<ol class="stepper stepper-horizontal w-100">
  <li class="stepper-item active">Konto anlegen</li>
  <li class="stepper-item active">E-Mail bestätigen</li>
  <li class="stepper-item">Profil aktualisieren</li>
  <li class="stepper-item">Fertig</li>
</ol>

Mit Links

Führt der Stepper über mehrere Seiten, baust du ihn aus Links. Springst du innerhalb desselben Dokuments zwischen Abschnitten, ergänze role="button" oder nutze <button>-Elemente. Für schnelle Farbanpassungen eignen sich die Link-Utilities.

<div class="stepper">
  <a href="#" role="button" class="stepper-item active">Konto anlegen</a>
  <a href="#" role="button" class="stepper-item active">E-Mail bestätigen</a>
  <a href="#" role="button" class="stepper-item theme-secondary">Profil aktualisieren</a>
  <a href="#" role="button" class="stepper-item theme-secondary">Fertig</a>
</div>

CSS-Variablen, Sass-Tokens, das Mixin für horizontale Stepper und den Overflow-Wrapper findest du in der Originaldokumentation.