<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <div class="container"> <div class="panel panel-default panelwrapper"> <div class="panel-heading panelHeading"> <span>Door Production ERP Data<i class="fa fa-gears pull-right"></i></span> </div> <div class="panel-body panelbody"> <dl class="dl-horizontal"> <p class="lead topbottom">Shift 1</p> <hr class="topbottom"> <dt class="listHeading"># of Units:</dt> <dd class="listText">342</dd> <dt class="listHeading">FPY:</dt> <dd class="listText">95.64%</dd> <dt class="listHeading">PR1:</dt> <dd class="listText">100%</dd> <dt class="listHeading">PR2:</dt> <dd class="listText">97%</dd> <dt class="listHeading">PR3:</dt> <dd class="listText">98.6%</dd> <hr class="topbottom"> <div class="badgeContainer"> <span class="badge badgeItems">F8AHEN_White</span> <span class="badge badgeItems">HNE28S_Beige</span> <span class="badge badgeItems">928NSN_Lightgray</span> </div> <hr class="topbottom"> <div class="alert alert-info"><strong>Belt Info:</strong> 3 warnings</div> </dl> <hr class="topbottom"> <button type="button" class="btn btn-primary pull-right">Details <i class="fa fa-external-link"></i></button> </div> </div> </div>

.panelHeading { font-weight: bold; text-align: center; background-color: #337ab7 !important; color: white !important; } .panelbody { padding: 5px; } .topbottom { margin-top: 5px; margin-bottom: 5px; } .panelwrapper { margin-top: 10px; max-width: 270px; } .dl-horizontal { padding-right: 5px; padding-left:5px; } .listHeading { font-weight: bold; text-align: left !important; font-size: 18px; line-height: 20px; } .listText { text-align: right !important; font-size: 20px; } .fullWidth { width: 100%; } .outer { border: 1px black solid; } .badgeContainer { position: relative; } .badgeContainer:after { display: block; clear: both; content: ""; } .badgeItems { background-color: #337ab7 !important; }