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>