title: How can I make a series of steps for a progress bar in a multi-step form?
body: <p>Currently I have the following code</p>
  
  <pre><code>&lt;div class="progress"&gt;
     &lt;div class='progress-bar bar-style' role='progressbar' aria-valueactive='1' aria-valuemin='0' aria-valuemax="8" id='userProgress'&gt;
         &lt;span id="progressStatus"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It produces a basic static nav that updates where I want and I am modifying the inside <code>span</code> with JS. </p>
  
  <p>I want to build a label on top that shows the following:</p>
  
  <ul>
  <li>Step 1: Setup</li>
  <li>Step 2: Input Config</li>
  <li>Step 3: Output Header</li>
  <li>Step 4: Output Zip</li>
  </ul>
  
  <p>The purpose is to be a static header over the progress bar of a multi-step form. 
  Issue is I have no idea how to code this, or how to even start. Bootstrap-3 doesn't seem to have any simple snippets for how to make one. </p>
  
  <p>I'd assume I'd have some means of adding text above the nav and javascript change which text is highlighted on  form navigation? Can anyone share any links or point in the direction of some documentation to get started?</p>