<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: