Edit in JSFiddle


              
            
          
            
              
                
<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>
.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%;
}

External resources loaded into this fiddle: