<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <div class="progress-container"> <div class="progress-row"> <div class="prog-info prog-title"> <span class="top-count">Target</span> <span class="bottom-count">Bonus</span> </div> <div class="prog-info prog-info1"> <span class="top-count">10000</span> <span class="bottom-count">10000</span> </div> <div class="prog-info prog-info2"> <span class="top-count">1000</span> <span class="bottom-count">1000</span> </div> <div class="prog-info prog-info3"> <span class="top-count">100</span> <span class="bottom-count">100</span> </div> <div class="prog-info prog-info4"> <span class="top-count">10</span> <span class="bottom-count">10</span> </div> <!-- <div class="prog-info prog-info5"></div> <div class="prog-info prog-info6"></div> <div class="prog-info prog-info7"></div> <div class="prog-info prog-info8"></div> --> </div>

body { margin: 0; } .progress-container { width: 500px; float: left; margin-top: 25px; margin-left: 25px; padding-left: 25px; } .progress-row { background-color: #ddd; height: 15px; width: 100%; position: relative; } .prog-info { height: 31px; width: 2px; background-color: #000; position: absolute; left: 0; top: -8px; } .top-count, .bottom-count { font-size: 12px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .top-count { top: -18px; } .bottom-count { bottom: -18px; } .prog-title { left: -22px; background-color: transparent; } .prog-info1 { left: 30px; } .prog-info2 { left: 90px; } .prog-info3 { left: 150px; } .prog-info4 { left: 200px; }