<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="col-sm-12 col-md-12 col-xs-12 col-lg-12"> <div class="well shadow" style="background-color: none;"> <header class="w3-container" style=""> <h3 class="text-center header"><b><i class="fa fa-line-chart"></i>General Stats</b></h3> </header> <div class="w3-container"> <div class="row" style=""> <div class="col-md-12 col-sm-12 col-lg-12 progressbar"> <div class="col-md-2 col-sm-2 col-lg-2"> <div class="pull-right">1st Stage </div> </div> <div class="col-md-10 col-sm-10 col-lg-10"> <div class="bggray"> <div class="w3-container w3-center w3-padding bggray" style="width:0%;float:left;height:30px;color:white; background-color:white;"></div> <div role="progressbar" class="progress-bar progress-bar-success progress-bar-striped active" style=" height:30px; width:10%;overflow:hidden;">10%</div> </div> </div> </div> <div class="col-md-12 col-sm-12 col-lg-12 progressbar"> <div class="col-md-2 col-sm-2 col-lg-2"> <div class="pull-right">2nd Stage </div> </div> <div class="col-md-10 col-sm-10 col-lg-10"> <div class="bggray"> <div class="w3-container w3-center w3-padding bggray" style="width:10%;float:left;height:30px;color:white; background-color:white;"></div> <div role="progressbar" class="progress-bar progress-bar-default progress-bar-striped active" style=" height:30px; width:20%;overflow:hidden;">20%</div> </div> </div> </div> <div class="col-md-12 col-sm-12 col-lg-12 progressbar"> <div class="col-md-2 col-sm-2 col-lg-2"> <div class="pull-right">3rd Stage </div> </div> <div class="col-md-10 col-sm-10 col-lg-10"> <div class="bggray"> <div class="w3-container w3-center w3-padding bggray" style="width:30%;float:left;height:30px;color:white; background-color:white;"></div> <div role="progressbar" class="progress-bar progress-bar-danger progress-bar-striped active" style=" height:30px; width:20%;overflow:hidden;">20%</div> </div> </div> </div> <div class="col-md-12 col-sm-12 col-lg-12 progressbar"> <div class="col-md-2 col-sm-2 col-lg-2"> <div class="pull-right">4th Stage </div> </div> <div class="col-md-10 col-sm-10 col-lg-10"> <div class="bggray"> <div class="w3-container w3-center w3-padding bggray" style="width:50%;float:left;height:30px;color:white; background-color:white;"></div> <div role="progressbar" class="progress-bar progress-bar-warning progress-bar-striped active" style=" height:30px; width:20%;overflow:hidden;">20%</div> </div> </div> </div> <div class="col-md-12 col-sm-12 col-lg-12 progressbar"> <div class="col-md-2 col-sm-2 col-lg-2"> <div class="pull-right">5th Stage</div> </div> <div class="col-md-10 col-sm-10 col-lg-10"> <div class="bggray"> <div class="w3-container w3-center w3-padding bggray" style="width:70%;float:left;height:30px;color:white; background-color:white;"></div> <div role="progressbar" class="progress-bar progress-bar-success progress-bar-striped active" style="height:30px; width:30%;overflow:hidden;">30%</div> </div> </div> </div> </div> </div> </div> </div>