<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-6"> <h3>Requirements for Promotion</h3> <div class="well well-sm"> <div class="row"> <div class="col-xs-12 col-md-6 text-center"> <h1 class="rating-num"> PGY2</h1> <div class="rating"> <span class="glyphicon glyphicon-check"></span><span class="glyphicon glyphicon-check"> </span><span class="glyphicon glyphicon-check"></span><span class="glyphicon glyphicon-check"> </span><span class="glyphicon glyphicon-unchecked"></span> </div> <div> <span class="glyphicon glyphicon-user"></span>1,050,008 total </div> </div> <div class="col-xs-12 col-md-6"> <div class="row rating-desc"> <div class="col-xs-3 col-md-3 text-right"> CVC </div> <div class="col-xs-8 col-md-9"> <div class="prog"> <span class="label label-primary"> <span class="fa fa-check-circle"></span> <span class="fa fa-check-circle"></span> <span class="fa fa-check-circle"></span> <span class="fa fa-check-circle"></span> <span class="fa fa-circle-o"></span> </span> </div> </div> <!-- end CVC --> <div class="col-xs-3 col-md-3 text-right"> Para </div> <div class="col-xs-8 col-md-9"> <div class="prog"> <span class="label label-warning"> <span class="fa fa-check-circle"></span> <span class="fa fa-circle-o"></span> <span class="fa fa-circle-o"></span> </span> </div> </div> <!-- end Para --> <div class="col-xs-3 col-md-3 text-right"> <span class="glyphicon glyphicon-star"></span>4 </div> <div class="col-xs-8 col-md-9"> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60%</span> </div> </div> </div> <!-- end 4 --> <div class="col-xs-3 col-md-3 text-right"> <span class="glyphicon glyphicon-star"></span>3 </div> <div class="col-xs-8 col-md-9"> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40%</span> </div> </div> </div> <!-- end 3 --> <div class="col-xs-3 col-md-3 text-right"> <span class="glyphicon glyphicon-star"></span>2 </div> <div class="col-xs-8 col-md-9"> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20%</span> </div> </div> </div> <!-- end 2 --> <div class="col-xs-3 col-md-3 text-right"> LP </div> <div class="col-xs-8 col-md-9"> <div class="prog"> <span class="label label-danger"> <span class="fa fa-circle-o"></span> <span class="fa fa-circle-o"></span> <span class="fa fa-circle-o"></span> </span> </div> </div> <!-- end LP --> </div> <!-- end row --> </div> </div> </div> </div> </div> </div>

/* http://www.jquery2dotnet.com/ */ body{ margin-top:20px;} .glyphicon { margin-right:5px;} .rating .glyphicon {font-size: 22px;} .rating-num { margin-top:0px;font-size: 54px; } .progress { margin-bottom: 5px;} .progress-bar { text-align: left; } .rating-desc .col-md-3 {padding-right: 0px;} .prog .label {font-size: 30px;}