<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div class="container"> <div class="row"> <h2 class="text-center">Progress Bar Meter!<br/></h2> <hr /> </div> <br> <div class="row"> <div class="col"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-type">HTML / HTML5</span> <span class="progress-completed">60%</span> </div> <br> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> <span class="progress-type">ASP.Net</span> <span class="progress-completed">40%</span> </div> <br> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete (info)</span> </div> <span class="progress-type">Java</span> <span class="progress-completed">20%</span> </div> <br> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> <span class="progress-type">JavaScript / jQuery</span> <span class="progress-completed">60%</span> </div> <br> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> <span class="progress-type">CSS / CSS3</span> <span class="progress-completed">80%</span> </div> <br> <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>

.progress { position: relative; height: 30px !important; } .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; } .progress > .progress-type { position: absolute; left: 0px; font-size: 10px; font-weight: 800; padding: 3px 30px 2px 10px; color: rgb(255, 255, 255); background-color: rgba(25, 25, 25, 0.2); height: 70px; } .progress > .progress-completed { position: absolute; font-size: 10px; right: 0px; font-weight: 800; padding: 3px 10px 2px; }