"Status Boxes"
Bootstrap 3.2.0 Snippet by jyot

<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 ----------> <div class="container"> <div class="row"> <div class="col-xs-6 col-md-3"> <div class="panel status panel" style="background-color:red;" > <div class="panel-heading"> <div style="color:white; font-size:40px;">3</div> <div style="color:white;">List Nearing 5000 items</div> </div> </div> <div class="container"> <div class="notice notice-danger"> <strong>List A</strong> <strong style="float:right;">5700</strong> <div class="progress" style="height:4px; margin:8px 0;"> <div class="progress-bar progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: 1000%; background-color:red;"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </div> <div class="notice notice-danger"> <strong>List B</strong> <strong style="float:right;">5300</strong> <div class="progress" style="height:4px; margin:8px 0;"> <div class="progress-bar progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: 1000%; background-color:red;"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </div> <div class="notice notice-danger"> <strong>List C</strong> <strong style="float:right;">6000</strong> <div class="progress" style="height:4px; margin:8px 0;"> <div class="progress-bar progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: 1000%; background-color:red;"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="panel status panel" style="background-color:orange;"> <div class="panel-heading"> <div style="color:white; font-size:40px;">2</div> <div style="color:white;">List between 3000 to 5000 items</div> </div> </div> <div class="container"> <div class="notice notice-warning"> <strong>List D</strong> <strong style="float:right;">3800</strong> <div class="progress" style="height:4px; margin:8px 0;"> <div class="progress-bar progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: 80%; background-color:orange;"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </div> <div class="notice notice-warning"> <strong>List E</strong> <strong style="float:right;">3500</strong> <div class="progress" style="height:4px; margin:8px 0;"> <div class="progress-bar progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: 70%; background-color:orange;"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="panel status panel" style="background-color:green;"> <div class="panel-heading"> <div style="color:white; font-size:40px;">1</div> <div style="color:white;">List below 3000 items</div> </div> </div> <div class="container"> <div class="notice notice-success"> <strong>List F</strong> <strong style="float:right;">2000</strong> <div class="progress" style="height:4px; margin:8px 0;"> <div class="progress-bar progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: 40%; background-color:green;"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </div> </div> </div> </div> </div> <hr> <link src="http://bootswatch.com/flatly/bootstrap.css" type="text/css">
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900|Oswald); body{ padding: 50px 0; } .status { font-family: 'Source Sans Pro', sans-serif; } .status .panel-title { font-family: 'Oswald', sans-serif; font-size: 72px; font-weight: bold; color: #fff; line-height: 45px; padding-top: 20px; letter-spacing: -0.8px; } .notice { width:22%; padding: 15px; background-color: #fafafa; border-left: 6px solid #7f7f84; margin-bottom: 10px; -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); } .notice-sm { padding: 10px; font-size: 80%; } .notice-lg { padding: 35px; font-size: large; } .notice-success { border-color: green; } .notice-success>strong { color: #80D651; } .notice-info { border-color: #45ABCD; } .notice-info>strong { color: #45ABCD; } .notice-warning { border-color: #FEAF20; } .notice-warning>strong { color: #FEAF20; } .notice-danger { border-color: #d73814; } .notice-danger>strong { color: #d73814; } }

Related: See More


Questions / Comments: