Steps

JS Optional

Steps are progress indicators of a sequence of task steps.

• Step 1
• Step 2
• Step 3
• Step 4

Add a container element with the step class. And add child elements with the step-item class.

The step-item with the active class will be highlighted and indicate the current state of progress.

Use JavaScript to change this dynamically.

<ul class="step">
  <li class="step-item">
    <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
  </li>
  <li class="step-item active">
    <a href="#" class="tooltip" data-tooltip="Step 2">Step 2</a>
  </li>
  <li class="step-item">
    <a href="#" class="tooltip" data-tooltip="Step 3">Step 3</a>
  </li>
  <li class="step-item">
    <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
  </li>
</ul>