<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"><h1>Infrastructure Performance Metrics</h1> <div class="row"> <div class="col-md-3"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">NAS - 1</h3> <h5>Stores Logs, Backups, & Files</h5> </div> <div class="panel-body"> <table class="table condensed"> <tr> <td width="10%"><span class="sm-box bggreen2"></span></td> <td width="80%"><b>CPU</b></td> <td width="10%">100%</td> </table> <table class="table condensed"> <tr> <td width="10%"><span class="sm-box bgyellow2"></span></td> <td width="80%"><b>Memory</b></td> <td width="10%">70%</td> </table> <table class="table condensed"> <tr> <td width="10%"><span class="sm-box bgred2"></span></td> <td width="80%"><b>Network</b></td> <td width="10%">0%</td> </table> <table class="table condensed"> <tr> <td width="10%"><span class="sm-box bgred2"></span></td> <td width="80%"><b>i/o</b></td> <td width="10%">0%</td> </table> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">NAS - 1</h3> <h5>Stores Logs, Backups, & Files</h5> </div> <div class="panel-body"> <table class="table condensed"> <tr> <td width="10%"><span class="sm-box bggreen2"></span></td> <td width="80%"><b>CPU</b></td> <td width="10%">100%</td> </table> <table class="table condensed"> <tr> <td width="10%"><span class="sm-box bgyellow2"></span></td> <td width="80%"><b>Memory</b></td> <td width="10%">70%</td> </table> <table class="table condensed"> <tr> <td width="10%"><span class="sm-box bgred2"></span></td> <td width="80%"><b>Network</b></td> <td width="10%">0%</td> </table> <table class="table condensed"> <tr> <td width="10%"><span class="sm-box bgred2"></span></td> <td width="80%"><b>i/o</b></td> <td width="10%">0%</td> </table> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">NAS - 1</h3> <h5>Stores Logs, Backups, & Files</h5> </div> <div class="panel-body"> <table class="table condensed"> <tr> <td width="10%"><span class="sm-box bggreen2"></span></td> <td width="80%"><b>CPU</b></td> <td width="10%">100%</td> </table> <table class="table condensed"> <tr> <td width="10%"><span class="sm-box bgyellow2"></span></td> <td width="80%"><b>Memory</b></td> <td width="10%">70%</td> </table> <table class="table condensed"> <tr> <td width="10%"><span class="sm-box bgred2"></span></td> <td width="80%"><b>Network</b></td> <td width="10%">0%</td> </table> <table class="table condensed"> <tr> <td width="10%"><span class="sm-box bgred2"></span></td> <td width="80%"><b>i/o</b></td> <td width="10%">0%</td> </table> </div> </div> </div> </div> </div>

.bggreen2 {background-color: #048444;} .txt-w {color:white;} .txt-b {color:black;} .bgyellow2 {background-color: #FFD800;} .bgred2 {background-color: #C20001;} .thin-end { border-bottom: 2px solid black; } .sm-box {width: 12px; display: inline-block; after:content: '.'; after:visibility: hidden; height:12px;} .panel-success > .panel-heading a:link {color:white; text-decoration: underline} .panel-warning > .panel-heading a:link {color:black; text-decoration: underline} .panel-danger > .panel-heading a:link {color:white; text-decoration: underline} .panel-success > .panel-heading { color: white; background-color: #048444; } .panel-warning > .panel-heading { color: black; background-color: #FFD800; } .panel-danger > .panel-heading { color: white; background-color: #C20001; } .condensed {margin:0px}