<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="jumbotron"> <div class="container"> <h1 class="text-center">Server Status</h1> </div> </div> <br> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="status-perfect"> <div class="panel-heading"> <div class="panel-title"> <h4> The system is operating normally. </h4> </div> </div> </div> <br> <div class="status-reduced"> <div class="panel-heading"> <div class="panel-title"> <h4> The system is operating, but with reduced capacity. </h4> </div> </div> </div> <br> <div class="status-critical"> <div class="panel-heading"> <div class="panel-title"> <h4> The system is in <b>critical</b> condition and is no longer functioning normally. </h4> </div> </div> </div> <br> <div class="row clearfix"> <div class="col-md-12 column"> <div class="list-group"> <div class="list-group-item"> <h4 class="list-group-item-heading op"> Network Proxy <span class="pull-right">... timed out (1200ms)</span> </h4> </div> <div class="list-group-item"> <h4 class="list-group-item-heading op"> Cluster 1 <span class="pull-right">... connection refused.</span> </h4> </div> <div class="list-group-item"> <h4 class="list-group-item-heading op"> Cluster 2 <span class="pull-right">... operational (11ms)</span> </h4> </div> <div class="list-group-item"> <h4 class="list-group-item-heading op"> Main CDN <span class="pull-right">... timed out (1200ms)</span> </h4> </div> <div class="list-group-item"> <h4 class="list-group-item-heading op"> Backup CDN <span class="pull-right">... operational (21ms)</span> </h4> </div> </div> </div> </div> </div> </div> </div> <br><br> <!-- removable spacing, just put it there for the sake of making it look good -->

@import url(https://fonts.googleapis.com/css?family=Roboto:300); @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css); .op { margin-top: 7px; } body { font-family: 'Roboto', sans-serif; } .status-perfect { background-color: #33CC33; height: 100%; width: 100%; padding-top: 0.5em; padding-bottom: 0.5em; color: white; border-radius: 4px; font-size: 18px; } .status-reduced { background-color: #33CCFF; height: 100%; width: 100%; padding-top: 0.5em; padding-bottom: 0.5em; color: white; border-radius: 4px; font-size: 18px; } .status-critical { background-color: #FF0000; height: 100%; width: 100%; padding-top: 0.5em; padding-bottom: 0.5em; color: white; border-radius: 4px; font-size: 18px; }