<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 ----------> <section id="labels"> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-3"> <div class="ao"> <div class="ao-date"> <span class="changeby"><span class="glyphicon glyphicon-calendar"></span> Change by:</span> AUG 30 </div> <div class="ao-volume"> VOLUME: 20 </div> </div> </div> </div> </div> </section>

section { padding: 5%; } /*ignore anything above this line*/ .ao { position: relative; } .ao .ao-date { min-height: 80px; position: relative; font-size: 40px; line-height: 40px; text-align: center; font-weight: bold; background: #78bde7; padding: 20px 15px 20px; color: rgba(255,255,255,0.9); text-shadow: 1px 1px 0px rgba(0,0,0,0.1); } .ao .ao-date span.changeby { display: block; font-size: 16px; } .ao .ao-date:after { content: " "; border-right: 20px solid transparent; border-left: 20px solid transparent; position: absolute; bottom: -20px; left: 20%; border-top: 20px solid #78bde7; } .ao .ao-volume { padding: 20px; font-size: 24px; font-weight: bold; background: #efefef; color: #666; }