<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 ----------> <br /> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="list-group"> <h1>Total Calls</h1> <a href="http://www.jquery2dotnet.com" class="list-group-item visitor" rel="noreferrer" target="_self" data-ss1501841039="1"> <h3 class="pull-right"> <i class="fa fa-eye"></i> </h3> <h4 class="list-group-item-heading count">186</h4> <p class="list-group-item-text"> Today</p> </a><a href="http://www.jquery2dotnet.com" class="list-group-item facebook-like" rel="noreferrer" target="_self" data-ss1501841039="1"> <h3 class="pull-right"> <i class="fa fa-facebook-square"></i> </h3> <h4 class="list-group-item-heading count">2,886</h4> <p class="list-group-item-text"> Current Week</p> </a><a href="http://www.jquery2dotnet.com" class="list-group-item google-plus" rel="noreferrer" target="_self" data-ss1501841039="1"> <h3 class="pull-right"> <i class="fa fa-google-plus-square"></i> </h3> <h4 class="list-group-item-heading count">72,886</h4> <p class="list-group-item-text"> MTD</p> </a><a href="http://www.jquery2dotnet.com" class="list-group-item twitter" rel="noreferrer" target="_self" data-ss1501841039="1"> <h3 class="pull-right"> <i class="fa fa-twitter-square"></i> </h3> <h4 class="list-group-item-heading count">772,886</h4> <p class="list-group-item-text"> YTD</p> </a> </div> </div> <script type="text/javascript"> // Animate the element's value from x to y: $({ someValue: 0 }).animate({ someValue: Math.floor(Math.random() * 3000) }, { duration: 3000, easing: 'swing', // can be anything step: function () { // called on every step // Update the element's text with rounded-up value: $('.count').text(commaSeparateNumber(Math.round(this.someValue))); } }); function commaSeparateNumber(val) { while (/(\d+)(\d{3})/.test(val.toString())) { val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); } return val; } </script> <div class="container"> <div class="row"> <div class="col-sm-3"> <div class="hero-widget well well-sm"> <div class="icon"> <i class="glyphicon glyphicon-user"></i> </div> <div class="text"> <var>717</var> <label class="text-muted">Calls Received</label> </div> <div class="options"> <a href="javascript:;" class="btn btn-primary btn-lg"><i class="glyphicon"></i>View Calls</a> </div> </div> </div> <div class="col-sm-3"> <div class="hero-widget well well-sm"> <div class="icon"> <i class="glyphicon glyphicon-remove-circle"></i> </div> <div class="text"> <var>2</var> <label class="text-muted">Abandoned</label> </div> <div class="options"> <a href="javascript:;" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i> Abandoned calls</a> </div> </div> </div> <div class="col-sm-3"> <div class="hero-widget well well-sm"> <div class="icon"> <i class="glyphicon glyphicon-time"></i> </div> <div class="text"> <var>2.75s</var> <h1>ASA</h1> </div> <div class="options"> <a href="javascript:;" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i></a> </div> </div> </div> <div class="col-sm-3"> <div class="hero-widget well well-sm"> <div class="icon"> <i class="glyphicon glyphicon-cog"></i> </div> <div class="text"> <var>0.5%</var> <label class="text-muted">call drops</label> </div> <div class="options"> <a href="javascript:;" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-wrench"></i> View Drops</a> </div> </div> </div> </div> </div>

.hero-widget { text-align: center; padding-top: 20px; padding-bottom: 20px; } .hero-widget .icon { display: block; font-size: 96px; line-height: 96px; margin-bottom: 10px; text-align: center; } .hero-widget var { display: block; height: 64px; font-size: 64px; line-height: 64px; font-style: normal; } .hero-widget label { font-size: 17px; } .hero-widget .options { margin-top: 10px; }