Wizard

Wizards can be used in two different ways:

1. As an e-commerce wizard, where users can click on the step title and jump around from step to step. (ex. Amazon)
2. As a tracker, where users are monitoring the progress, without having the ability to interact with it. (ex. Fedex)

Wizards are made with a grid, in a flexible manner for size customization. They should easily accept more or fewer list items. Wizards are preferably created using <ol> ordered lists—though <ul> unordered lists or any other element which makes semantic sense can be used with the classes— with each step as a <li>. The steps need to have a .step-title in them. Optionally, they can have additional information by creating a .step-info element containing .step-title, .step-description, and any badges, pills, etc.

Four Wizard default step variations

1. Step completed

   Create successful/completed styling with.step-complete or .step-success.

2. Step error or incomplete

   Create error styling with .step-error or .step-incomplete.

3. Current step

   Create current step styling with.step-current. On the current step, add aria-current="step" as an attribute on the li element.

4. Not yet started—with number

   Make numbered steps with.step-number. Numbers automatically count .wizard-step elements through CSS.

Wizard with badge

1. Current step

   The review by the Census Bureau happens in 4 styles.

   Contingent Approved
2. Not yet started
3. Not yet started

  <ol class="wizard">
    <li class="wizard-step step-current" id="step_1">
      <div class="step-info">
        <div class="step-title">Current step</div>
        <p class="step-description">The review by the Census Bureau happens in 4 styles.</p>
        <span class="badge text-bg-warning">Contingent Approved</span>
      </div>
    </li>
    <li class="wizard-step step-number" id="step_2">
      <span class="step-title">Not yet started</span>
    </li>
    <li class="wizard-step step-number" id="step_3">
      <span class="step-title">Not yet started</span>
    </li>
  </ol>
      

Wizard with pills and more steps

1. Application submitted

   Result: Approved

2. Start reviews

   Result: Approved

3. Complete all reviews

   In Progress

4. Error step
5. Result delivered
6. Result delivered
7. Result delivered

  <ol class="wizard">
    <li class="wizard-step step-complete" id="step_1">
      <div class="step-info">
        <span class="step-title">Application submitted</span>
        <p class="step-description text-md-center">
          Result: <span class="badge text-bg-success">Approved</span>
        </p>
      </div>
    </li>
    <li class="wizard-step step-complete" id="step_2" aria-current="step">
      <div class="step-info">
        <span class="step-title">Start reviews</span>
        <p class="step-description text-md-center">
          Result: <span class="badge text-bg-success">Approved</span>
        </p>
      </div>
    </li>
    <li class="wizard-step step-current" id="step_3">
      <div class="step-info">
        <span class="step-title">Complete all reviews</span>
        <p class="step-description text-md-center">
          <span class="badge text-bg-info">In Progress</span>
        </p>
      </div>
    </li>
    <li class="wizard-step step-error" id="step_4">
      <span class="step-title">Error step</span>
    </li>
    <li class="wizard-step step-number" id="step_5">
      <span class="step-title">Result delivered</span>
    </li>
    <li class="wizard-step" id="step_5">
      <span class="step-title">Result delivered</span>
    </li>
    <li class="wizard-step" id="step_5">
      <span class="step-title">Result delivered</span>
    </li>
  </ol>
    

Wizard with links

1. Shopping Cart
2. Billing
3. Shipping
4. Review

  <ol class="wizard">
    <li class="wizard-step step-success" id="step_1">
      <span class="step-title"><a href="">Shopping Cart</a></span>
    </li>
    <li class="wizard-step step-success" id="step_1">
      <span class="step-title"><a href="">Billing</a></span>
    </li>
    <li class="wizard-step step-current" id="step_2">
      <span class="step-title"><a href="">Shipping</a></span>
    </li>
    <li class="wizard-step" id="step_3">
      <span class="step-title">Review</span>
    </li>
  </ol>
      

Vertical Wizard

1. Step completed
2. Step error or incomplete
3. Currently on this step
4. Not yet started—with number

  <ol class="wizard wizard-vertical">
    <li class="wizard-step step-complete" id="step_1">
      <span class="step-title">Step completed</span>
    </li>
    <li class="wizard-step step-error" id="step_3">
      <span class="step-title">Step error or incomplete</span>
    </li>
    <li class="wizard-step step-current" id="step_2">
      <span class="step-title">Currently on this step</span>
    </li>
    <li class="wizard-step step-number" id="step_4">
      <span class="step-title">Not yet started&mdash;with number</span>
    </li>
  </ol>