<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class=""> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 53%;" data-toggle="tooltip" data-placement="top" title="Russian"> <span class="sr-only">53% Complete</span> </div> </div> <div class="progress-meter"> <h3 class="progress-time" style="left:0px;">23:00</h3><h3 class="progress-time" style="right:0px;">23:41</h3> <div class="meter meter-left" style="width: 20%;"><span class="meter-text">Maitenance</span></div> <div class="meter meter-left" style="width: 30%;"><span class="meter-text">Taxi</span></div> <div class="meter meter-left" style="width: 50%;"><span class="meter-text">SAS</span></div> </div> </div> </div>

.progress-meter { min-height: 45px; } .progress-meter > .meter { min-height: 15px; border-width: 0px; border-style: solid; border-color: rgb(160, 160, 160); } .progress-meter > .meter-left { border-left-width: 2px; float: left; text-align:center; border-bottom-width: 2px; } .progress-meter > .meter-left:last-child { border-bottom-style:dashed; border-right-style:dashed; border-right-width:2px; } .progress-meter > .meter > .meter-text { width: 100%; font-weight: 700; font-size: 0.85em; color: rgb(160, 160, 160); } .progress-time { position:absolute; } .progress-time:first { } .progress-time:last { }

$(function () { $('[data-toggle="tooltip"]').tooltip(); });