<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container dynamicTile"> <div class="container dynamicTile"> <div class="double-pane"> <h3><span style="position:absolute" class="label label-default">Overall Summary</span></h3> <h3><span style="float:right" class="label label-default">Service Level</span></h3> </div> <div class="row"> <div class="col-sm-2 col-xs-4"> <span class="tileheader" >Entered</span> <div id="Ent" class="tile"> <div class="item"> <h3 class="tilecaption">30</h3> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <span class="tileheader" >Answered</span> <div id="Ans" class="tile"> <div class="item"> <h3 class="tilecaption">21</h3> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <span class="tileheader" >Abandoned</span> <div id="Abnd" class="tile"> <div class="item"> <h3 class="tilecaption">10</h3> </div> </div> </div> <!-- Service Levels --> <div style="float:right" class="col-sm-2 col-xs-4"> <span class="tileheader" >Period</span> <div id="SvcPeriod" class="tile"> <div class="item"> <h2 class="tilecaption">20%</h2> </div> </div> </div> <div style="float:right" class="col-sm-2 col-xs-4"> <span class="tileheader" >Shift</span> <div id="SvcShift" class="tile"> <div class="item"> <h2 class="tilecaption">80%</h2> </div> </div> </div> </div> <div class="clearfix"></div> <hr/> <h3><span class="label label-default">Sales Department</span></h3> <div class="row"> <div class="col-sm-4 col-xs-8"> <span class="tileheader" >Longest Wait Time</span> <div id="SumAbnd" class="tile"> <div class="item"> <h3 class="tilecaption">00:12:10</h3> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <span class="tileheader" >Waiting</span> <div id="SumBlah" class="tile"> <div class="item"> <h3 class="tilecaption">9</h3> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <span class="tileheader" >Abandoned</span> <div id="SalesAban" class="tile"> <div class="item"> <h3 class="tilecaption">3</h3> </div> </div> </div> <div style="float:right" class="col-sm-2 col-xs-4"> <span class="tileheader" >Agents Available</span> <div id="SalesAgents" class="tile"> <div class="item"> <h3 class="tilecaption">6</h3> </div> </div> </div> </div> <div class="clearfix"></div> <hr/> <h3><span class="label label-default">Marketing Department</span></h3> <div class="row"> <div class="col-sm-4 col-xs-8"> <span class="tileheader" >Longest Wait Time</span> <div id="SumAbnd" class="tile"> <div class="item"> <h3 class="tilecaption">00:20:12</h3> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <span class="tileheader" >Waiting</span> <div id="SumBlah" class="tile"> <div class="item"> <h3 class="tilecaption">3</h3> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <span class="tileheader" >Abandoned</span> <div id="MarketingAban" class="tile"> <div class="item"> <h3 class="tilecaption">6</h3> </div> </div> </div> <div style="float:right" class="col-sm-2 col-xs-4"> <span class="tileheader" >Agents Available</span> <div id="MarketingAgents" class="tile"> <div class="item"> <h3 class="tilecaption">12</h3> </div> </div> </div> </div> </div> </div>

body{ padding-top: 40px; } .dynamicTile .col-sm-2.col-xs-4{ padding:5px; } .dynamicTile .col-sm-4.col-xs-8{ padding:5px; } .double-pane{ padding-bottom:30px; } .tileheader{ position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); margin:0!important; text-align: center; font-family: Segoe UI; font-size: 1.5em; } .tilecaption{ position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); margin:0!important; text-align: center; color:white; font-size:6em; font-family: Segoe UI; font-weight: lighter; } .tile{ background: rgb(62,157,215); height:140px; } .item{ height:140px; } #Ans{ background: rgb(62,157,215); } #Ent{ background: rgb(0,142,0); } #Abnd{ background: rgb(175,26,63); } #SalesAgents{ background: rgb(0,142,0); } #MarketingAgents{ background: rgb(0,142,0); } #SalesAban{ background: rgb(175,26,63); } #MarketingAban{ background: rgb(175,26,63); }

$( document ).ready(function() { });