<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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"> <p><b>PROJE ADIMLARI</b></p> <p>%60 Tamamlanmıştır.</p>   <div class="row"> <div class="col-sm-3" style="text-align:center"> Adım 1' in adı</div> <div class="col-sm-3" style="text-align:center"> Adım 2' nin adı</div> <div class="col-sm-3" style="text-align:center"> İnşaat(adım sırasına göre gelir.)</div> <div class="col-sm-3" style="text-align:center"> Adım 4' ün adı</div> </div> <div class="row"> <div class="progress col-sm-3"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"> <span class="sr"> Tamamlandı</span> </div> </div> <div class="progress col-sm-3"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"> <span class="sr"> Devam Ediyor</span> </div> </div> <div class="progress col-sm-3"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr"> %60</span> </div> </div> <div class="progress col-sm-3"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"> <span> Başlamadı</span> </div> </div> </div> </div>

body { margin: 30px 0px; } .progress { position: relative; height: 40px; } .progress-bar { position: absolute; left: 0px; } .progress > .progress-type { position: absolute; left: 0px; font-weight: 800; padding: 3px 30px 2px 10px; color: rgb(255, 255, 255); background-color:rgba(25, 25, 25, 0.2); } .progress > .progress-completed { position: absolute; left: 10px; font-weight: 800; padding: 3px 10px 2px; } .sr{ position: absolute; overflow: visible; text-align: center; }