<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"> <div class="row"> <h2 class="text-center">Progress Bar Meter!<br/><small>Hover over the options if you can't see the text</small></h2> <hr /> </div> <div class="row"> <div class="col-sm-offset-4 col-sm-4"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" data-toggle="tooltip" data-placement="top" title="HTML / HTML5"> <span class="sr-only">60% Complete</span> <span class="progress-type">HTML / HTML5</span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 80%;" data-toggle="tooltip" data-placement="top" title="CSS / CSS3"> <span class="sr-only">80% Complete</span> <span class="progress-type">CSS / CSS3</span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 1%;" data-toggle="tooltip" data-placement="top" title="Russian"> <span class="sr-only">1% Complete</span> <span class="progress-type">Russian</span> </div> </div> <div class="progress-meter"> <div class="meter meter-left" style="width: 25%;"><span class="meter-text">Meh</span></div> <div class="meter meter-left" style="width: 25%;"><span class="meter-text">Sorta</span></div> <div class="meter meter-right" style="width: 20%;"><span class="meter-text">MASTER</span></div> <div class="meter meter-right" style="width: 30%;"><span class="meter-text">WOW</span></div> </div> </div> </div> </div>

body { padding: 30px 0px; } .navbar-why-you-so-small > .navbar-collapse { background-color: rgba(51, 51, 51, 0.8); } .progress-bar { text-align: left; white-space: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .progress-bar > .progress-type { padding-left: 10px; } .progress-meter { min-height: 15px; border-bottom: 2px solid rgb(160, 160, 160); } .progress-meter > .meter { position: relative; float: left; min-height: 15px; border-width: 0px; border-style: solid; border-color: rgb(160, 160, 160); } .progress-meter > .meter-left { border-left-width: 2px; } .progress-meter > .meter-right { float: right; border-right-width: 2px; } .progress-meter > .meter-right:last-child { border-left-width: 2px; } .progress-meter > .meter > .meter-text { position: absolute; display: inline-block; bottom: -20px; width: 100%; font-weight: 700; font-size: 0.85em; color: rgb(160, 160, 160); text-align: left; } .progress-meter > .meter.meter-right > .meter-text { text-align: right; }

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