"Satus Blocks in Grid"
Bootstrap 3.3.0 Snippet by bfunc

<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="outputs"> <div class="row"> <div class="output col-sm-6"> <div class="panel panel-default"> <div class="panel-body"> <div class="output-box bg-danger"> <div class="row"> <div class="col-xs-6"> <h4> <span class="glyphicon glyphicon-exclamation-sign"></span> <span class="name">Output name 01</span> </h4> </div> <div class="col-xs-6"> <div class="btn-group pull-right"> <a class="btn btn-default">On</a> <a class="btn btn-primary">Off</a> </div> </div> </div> </div> <div class="description"> <div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign"></span>&nbsp Battery Low </div> <div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign"></span>&nbsp Monitor Alarm </div> <div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign"></span>&nbsp Tamper Alarm </div> </div> </div> </div> </div> <div class="output col-sm-6"> <div class="panel panel-default"> <div class="panel-body"> <div class="output-box bg-info"> <div class="row"> <div class="col-xs-6"> <h4> <span class="name">Output name 01</span> </h4> </div> <div class="col-xs-6"> <div class="btn-group pull-right"> <a class="btn btn-primary">On</a> <a class="btn btn-default">Off</a> </div> </div> </div> </div> </div> </div> </div> <div class="output col-sm-6"> <div class="panel panel-default"> <div class="panel-body"> <div class="output-box on bg-default"> <div class="row"> <div class="col-xs-6"> <h4> <span class="name">Output name 01</span> </h4> </div> <div class="col-xs-6"> <div class="btn-group pull-right"> <a class="btn btn-default">On</a> <a class="btn btn-primary">Off</a> </div> </div> </div> </div> </div> </div> </div> <div class="output col-sm-6"> <div class="panel panel-default"> <div class="panel-body"> <div class="output-box on bg-default"> <div class="row"> <div class="col-xs-6"> <h4> <span class="name">Output name 01</span> </h4> </div> <div class="col-xs-6"> <div class="btn-group pull-right"> <a class="btn btn-default">On</a> <a class="btn btn-primary">Off</a> </div> </div> </div> </div> </div> </div> </div> <div class="output col-sm-6"> <div class="panel panel-default"> <div class="panel-body"> <div class="output-box on bg-default"> <div class="row"> <div class="col-xs-6"> <h4> <span class="name">Output name 01</span> </h4> </div> <div class="col-xs-6"> <div class="btn-group pull-right"> <a class="btn btn-default">On</a> <a class="btn btn-primary">Off</a> </div> </div> </div> </div> </div> </div> </div> <div class="output col-sm-6"> <div class="panel panel-default"> <div class="panel-body"> <div class="output-box on bg-default"> <div class="row"> <div class="col-xs-6"> <h4> <span class="name">Output name 01</span> </h4> </div> <div class="col-xs-6"> <div class="btn-group pull-right"> <a class="btn btn-default">On</a> <a class="btn btn-primary">Off</a> </div> </div> </div> </div> </div> </div> </div> <div class="output col-sm-6"> <div class="panel panel-default"> <div class="panel-body"> <div class="output-box on bg-default"> <div class="row"> <div class="col-xs-6"> <h4> <span class="name">Output name 01</span> </h4> </div> <div class="col-xs-6"> <div class="btn-group pull-right"> <a class="btn btn-default">On</a> <a class="btn btn-primary">Off</a> </div> </div> </div> </div> </div> </div> </div> </div> </div>
.outputs{padding:50px;} .outputs .panel{} .outputs .panel .panel-body{margin:0px; padding:5px;} .outputs .panel .description{margin-top:5px;} .outputs .panel .description .alert{margin:0 0 5px 0;padding:8px;} .outputs .panel .output-box{ padding: 5px; border-radius: 5px; } .outputs .panel .output-box.bg-default{ background-color: #F0F0F0;} .outputs .panel .output-box.bg-danger .glyphicon{ color: #a94442;;} .outputs .panel .output-box h4{ margin:0px; padding:0px; line-height: 34px; padding-left:5px;} .outputs .panel .output-box.bg-default h4{color:#999999;}

Related: See More


Questions / Comments: