Wizard

A wizard is a step-by-step process that allows users to input information in a prescribed order and in which subsequent steps may depend on information entered in previous ones.

Interactive demo

Wizards usually involve multiple pages. One wizard page typically corresponds to a single step in a multistep process.

<div class="wizard-progress-bar">
        <ul>
          <li class="completed"><span>Step 1 (Completed)</span></li>
          <li class=" completed "><span>Step 2 (Completed)</span></li>
          <li class=" active "><span>Step 3 (Active)</span></li>
          <li><span>Step 4 (Incomplete)</span></li>
        </ul>
 </div>