Bootstrap Wizard Progress Bar

Bootstrap Wizard using Tabs to display the Progress Bar.

HTML

<div class="container" id="myWizard">
    <h3>Bootstrap Wizard Progress Bar</h3>
   <hr>
       
       <div class="container-fluid">
    <div class="row">
        <div class="bar-wrap">
            <div class="progress no-extra-space"></div>
            <div style="right:25%" class="progress-marker"></div>
            <div style="right:50%" class="progress-marker"></div>
            <div style="right:75%" class="progress-marker"></div>
        </div>
    </div>
    <div class="row">
        <div class="time-axis">
            <div class="time-spot-end">now</div>
            <div class="time-spot text-center">6 hours ago</div>
            <div class="time-spot text-center">12 hours ago</div>
            <div class="time-spot text-center">18 hours ago</div>
            <div class="time-spot-end text-right">24 hours ago</div>
        </div>
    </div>
</div>
       
   <div class="progress">
     <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="5" style="width: 20%;">
       Step 1 of 5
     </div>
   </div>
  
   <div class="navbar">
      <div class="navbar-inner">
            <ul class="nav nav-pills">
               <li class="active"><a href="#step1" data-toggle="tab" data-step="1">Step 1</a></li>
               <li><a href="#step2" data-toggle="tab" data-step="2">Step 2</a></li>
               <li><a href="#step3" data-toggle="tab" data-step="3">Step 3</a></li>
               <li><a href="#step4" data-toggle="tab" data-step="4">Step 4</a></li>
               <li><a href="#step5" data-toggle="tab" data-step="5">Step 5</a></li>
            </ul>
      </div>
   </div>
   <div class="tab-content">
      <div class="tab-pane fade in active" id="step1">
         
        <div class="well"> 
          
            <label>Security Question 1</label>
            <select class="form-control input-lg">
              <option value="What was the name of your first pet?">What was the name of your first...

CSS

.bar-wrap {
    position: relative;
}
.progress-marker {
    width: 2px;
    height: 10px;
    position: absolute;
    background: black;
    bottom: -5px;
}
.time-axis {
    display: block;
    float: left;
    width: 100%;
    /*margin: 0px 0 10px 0;*/
}
.time-spot {
    display: block;
    float: left;
    width: 25%;
}
.time-spot-end {
    display: block;
    float: left;
    width: 12.5%;
}

JavaScript

å