<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 ----------> <div class="panel panel-default metric-panel"> <div class="panel-heading"> <div class="row"> <div class="col-md-4">Total Instances</div> <div class="col-md-2">CPU usage</div> <div class="col-md-2">Memory usage</div> <div class="col-md-2">Storage usage</div> <div class="col-md-2">Network usage</div> </div> </div> <div class="panel-body"> <div class="row"> <div class="col-md-4"> <small>Running</small> <div class="progress"> <div class="progress-bar" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> <small>Stopped</small> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 30%;"> <span class="sr-only">30% Complete</span> </div> </div> <small>Terminated</small> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 10%;"> <span class="sr-only">10% Complete</span> </div> </div> </div> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> </div> </div> </div>

.metric-panel .panel-body { padding: 0; } .metric-panel .panel-body .row:first-child { background: #e5eef0; margin: 0; } .progress { overflow: hidden; height: 10px; margin-bottom: 10px; background-color: #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .progress-bar { float: left; width: 0%; height: 100%; font-size: 12px; line-height: 10px; color: #ffffff; text-align: center; background-color: #428bca; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-transition: width 0.6s ease; transition: width 0.6s ease; }