<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="badger-left" data-badger="Badger default (left)"> Block with badger 1 </div> <div class="badger-right badger-info" data-badger="Badger info (right)"> Block with badger 2 </div> <div class="badger-left badger-danger" data-badger="Badger danger (left)"> Block with badger 3 </div> <div class="badger-right badger-warning" data-badger="Badger warning (right)"> Block with badger 4 </div> <div class="badger-left badger-success" data-badger="Badger success (left)"> Block with badger 5 </div> <div class="badger-right badger-inverse" data-badger="Badger inverse (right)"> Block with badger 6 </div> </div> </div>

/* Badger ------------------------- */ [class*="badger"] { position: relative; margin: 15px 0; padding: 39px 19px 14px; background: #fff; border: 1px solid #ddd; border-radius: 6px; } [class*="badger"]:after { content: attr(data-badger); position: absolute; top: 0; padding: 3px 7px; font-size: 12px; font-weight: bold; background: #999; color: #fff; } .badger-left:after { left: 0; border-radius: 6px 0 6px 0; } .badger-right:after { right: 0; border-radius: 0 6px 0 6px; } .badger-danger:after { background: #d9534f; } .badger-warning:after { background: #f0ad4e; } .badger-success:after { background: #5cb85c; } .badger-info:after { background: #5bc0de; } .badger-inverse:after { background: #222; }