<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <div class="container"> <table id="layout"> <tr> <td> </td> <td> <div class="typeContainer"> <div class="typeHeader"><span class="fa fa-database"></span> SQL Servers</div> <div class="itemContainer"> <div class="itemConnected"> <!-- Default panel contents --> <div class="panel-heading"> <div class="itemHostname">RAND0756432</div> <div class="itemSummary">"Primary SQL Server"</div> </div> <div class="panel-body"> <div class="itemStatus">Online <span class="fa fa-check"></span></div> </div> </div> </div> <div class="itemContainer"> <div class="itemNotConnected"> <!-- Default panel contents --> <div class="panel-heading"> <div class="itemHostname">RAND07333312</div> <div class="itemSummary">"Secondary SQL Server"</div> </div> <div class="panel-body"> <div class="itemStatus">Offline <span class="fa fa-remove"></span></div> </div> </div> </div> </div> <div class="typeContainer"> <div class="typeHeader"><span class="fa fa-server"></span> Web Servers</div> <div class="itemContainer"> <div class="itemAttempting"> <!-- Default panel contents --> <div class="panel-heading"> <div class="itemHostname">RAND07323112</div> <div class="itemSummary">"PHP Server"</div> </div> <div class="panel-body"> <div class="itemStatus">Attempting to connect.. <span class="fa fa-spin fa-refresh"></span></div> </div> </div> </div> </div> <div class="typeContainer"> <div class="typeHeader"><span class="fa fa-list"></span> SharePoint Lists</div> </div> <div class="typeContainer"> <div class="typeHeader"><span class="fa fa-archive"></span> Backups</div> </div> </td> </tr> </table> </div>

.container { padding: 0; margin: 0; widht: 100%; height: 100%; min-height: 800px; background-color: #fff; } #layout { width: 100%; height: 100%; min-height: 800px; } #layout td { vertical-align: top; border: 1px solid #e7e7e7; } #layout tr:nth-child(1) td:nth-child(1) { padding: 20px; width: 250px; height: 100%; background-color: #f0f0f0; border-right: 1px solid #e7e7e7; } #layout tr:nth-child(1) td:nth-child(2) { background-color: #fff; height: 100%; } .typeContainer { padding: 20px; min-height: 100px; width: 100%; background-color: #fff; border-bottom: 1px solid #e7e7e7; } .typeHeader { color: #7f7f7f; text-transform: uppercase; font-size: 10pt; } .itemContainer { width: 220px; padding: 10px; height: 80px; display: inline-block; background-color: #fff; margin-top: 10px; margin-bottom: 10px; } .itemConnected { color: #3c763d; background-color: #dff0d8; border: 1px solid #d6e9c6; border-radius: 6px; } .itemAttempting { color: #b8823b; background-color: #fcf8e3; border: 1px solid #faebcc; border-radius: 6px; } .itemNotConnected { color: #b84442; background-color: #f2dede; border: 1px solid #ebccd1; border-radius: 6px; } .itemHostname { text-align: center; font-weight: bold; font-size: 10pt; } .itemSummary { text-align: center; font-size: 8pt; } .itemStatus { background-color: #fff; text-align: center; font-size: 8pt; border-radius: 3px; border: 1px solid #e7e7e7; border-bottom: 1px solid #d3d3d3; border-top: 1px solid #fff; } .fa-check { color: #3c763d; } .fa-remove { color: #af4442; } .panel-heading { padding: 8px!important; } .panel-body { padding: 8px!important; }