Horizontal stepper

A stepper/wizard leads a user through a process step by step. It contains a series of single-step instructions, and is often used for a setup and configuration tasks or a longer workflow. Read more about steppers/wizards in the UX Guidelines.
Also you can check out the wizards.

Use when

• The user needs guidance through a multi-step process, for instance if it's a low frequency task or the steps to take are unclear
• Steps have to be done in a specific order
• The task has a clear start and end

Design

There are 2 options for the stepper: horizontal and vertical, on 2 sizes.

					
Copy to clipboard
<div class="stepper">
   <ul>
      <li class="visited">
         <a href="#">
            <span>Not completed</span>
            <span class="step">Step 1/4</span>
         </a>
      </li>
      <li class="passed">
         <a href="#">
            <span>Completed</span>
            <span class="step">Step 2/4</span>
         </a>
      </li>
      <li class="active">
         <a href="#">
            <span>Active step</span>
            <span class="step">Step 3/4</span>
         </a>
      </li>
      <li>
         <a href="#">
            <span>Future step</span>
            <span class="step">Step 4/4</span>
         </a>
      </li>
   </ul>
</div>

Compressed version

Here you can find an example of the compressed version for the horizontal stepper:

					
Copy to clipboard
<div class="stepper stepper-sm">
   ...
</div>

No ellipsis

Here you can find an example of the stepper where the labels will be visible all the time, no ellipsis will appear if the label is too long. We don't recommend you to have more then 2 rows per label.

					
Copy to clipboard
<div class="stepper no-ellipsis">
   ...
</div>

Transitions

If you'd like a smooth animation to be applyed on each step as you go through them just add .transition class in the parent div.

					
Copy to clipboard
<div class="stepper transition">
   ...
</div>