Step navigation

Liander Bootstrap custom component. Provide visual feedback on the users’ position in a multiple step action.
On this page
html
<div class="step-navigation step-navigation-primary my-3">
  <div class="step-navigation-item">
    <span class="step-navigation-step me-2"><button type="button" class="btn btn-step btn-step-sm rounded-circle active">1</button></span>
    <span class="step-navigation-label d-none d-lg-inline-block">Product kiezen</span>
    <span class="step-navigation-label d-md-inline-block d-lg-none">Product</span>
  </div>
  <div class="step-navigation-item">
    <span class="step-navigation-step me-2"><button type="button" class="btn btn-step btn-step-sm rounded-circle">2</button></span>
    <span class="step-navigation-label d-none d-lg-inline-block">Bestelling controleren</span>
    <span class="step-navigation-label d-md-inline-block d-lg-none">Controleren</span>
  </div>
  <div class="step-navigation-item">
    <span class="step-navigation-step me-2"><button type="button" class="btn btn-step btn-step-sm rounded-circle">3</button></span>
    <span class="step-navigation-label d-none d-lg-inline-block">Voltooid</span>
    <span class="step-navigation-label d-md-inline-block d-lg-none">Voltooid</span>
  </div>
</div>
<div class="step-navigation step-navigation-primary my-3">
  <div class="step-navigation-item">
    <span class="step-navigation-step me-2"><button type="button" class="btn btn-step btn-step-sm rounded-circle">1</button></span>
    <span class="step-navigation-label d-none d-lg-inline-block">Product kiezen</span>
    <span class="step-navigation-label d-md-inline-block d-lg-none">Product</span>
  </div>
  <div class="step-navigation-item">
    <span class="step-navigation-step me-2"><button type="button" class="btn btn-step btn-step-sm rounded-circle active">2</button></span>
    <span class="step-navigation-label d-none d-lg-inline-block">Bestelling controleren</span>
    <span class="step-navigation-label d-md-inline-block d-lg-none">Controleren</span>
  </div>
  <div class="step-navigation-item">
    <span class="step-navigation-step me-2"><button type="button" class="btn btn-step btn-step-sm rounded-circle">3</button></span>
    <span class="step-navigation-label d-none d-lg-inline-block">Voltooid</span>
    <span class="step-navigation-label d-md-inline-block d-lg-none">Voltooid</span>
  </div>
</div>
<div class="step-navigation step-navigation-primary my-3">
  <div class="step-navigation-item">
    <span class="step-navigation-step me-2"><button type="button" class="btn btn-step btn-step-sm rounded-circle">1</button></span>
    <span class="step-navigation-label d-none d-lg-inline-block">Product kiezen</span>
    <span class="step-navigation-label d-md-inline-block d-lg-none">Product</span>
  </div>
  <div class="step-navigation-item">
    <span class="step-navigation-step me-2"><button type="button" class="btn btn-step btn-step-sm rounded-circle">2</button></span>
    <span class="step-navigation-label d-none d-lg-inline-block">Bestelling controleren</span>
    <span class="step-navigation-label d-md-inline-block d-lg-none">Controleren</span>
  </div>
  <div class="step-navigation-item">
    <span class="step-navigation-step me-2"><button type="button" class="btn btn-step btn-step-sm rounded-circle btn-step-success"><span class="fas fa-check"></span></button></span>
    <span class="step-navigation-label d-none d-lg-inline-block">Voltooid</span>
    <span class="step-navigation-label d-md-inline-block d-lg-none">Voltooid</span>
  </div>
</div>
<hr>
<div class="step-navigation step-navigation-primary my-3">
  <div class="step-navigation-item">
    <span class="step-navigation-step me-2"><button type="button" class="btn btn-step btn-step rounded-circle">1</button></span>
    <span class="step-navigation-label d-none d-lg-inline-block">Product kiezen</span>
    <span class="step-navigation-label d-md-inline-block d-lg-none">Product</span>
  </div>
  <div class="step-navigation-item">
    <span class="step-navigation-step me-2"><button type="button" class="btn btn-step btn-step rounded-circle">2</button></span>
    <span class="step-navigation-label d-none d-lg-inline-block">Bestelling controleren</span>
    <span class="step-navigation-label d-md-inline-block d-lg-none">Controleren</span>
  </div>
  <div class="step-navigation-item">
    <span class="step-navigation-step me-2"><button type="button" class="btn btn-step btn-step rounded-circle btn-step-success"><span class="fas fa-check"></span></button></span>
    <span class="step-navigation-label d-none d-lg-inline-block">Voltooid</span>
    <span class="step-navigation-label d-md-inline-block d-lg-none">Voltooid</span>
  </div>
</div>
Step navigation

Step Navigation Example
