<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 ----------> <div class="container"> <div class="row"> <div class="block"> <span class="label label-default badger-top-left">Badger default (top-left)</span> Block with badger 1 </div> <div class="block"> <span class="label label-default badger-top-right">Badger default (top-right)</span> Block with badger 2 </div> <div class="block"> <span class="label label-danger badger-bottom-left">Badger danger (bottom-left)</span> Block with badger 3 </div> <div class="block"> <span class="label label-warning badger-bottom-right">Badger warning (bottom-right)</span> Block with badger 4 </div> <div class="block"> <span class="label label-info badger-top-left">Badger info (top-left)</span> Block with badger 5 </div> <div class="block"> <span class="label label-success badger-top-right">Badger success (top-right)</span> Block with badger 6 </div> </div> </div>

/** Demo only **/ .block { position: relative; margin: 15px 0; padding: 25px 20px 25px; background: #fff; border: 1px solid #ddd; border-radius: 6px; } /** Label badger **/ [class*="badger"] { position: absolute; z-index: 1; border-radius: 0; } [class*="badger-top"] { top: 0; } [class*="badger-bottom"] { bottom: 0; } .badger-top-left { left: 0; border-top-left-radius: inherit; border-bottom-right-radius: .25em; } .badger-top-right { right: 0; border-top-right-radius: inherit; border-bottom-left-radius: .25em; } .badger-bottom-left { left: 0; border-top-right-radius: .25em; border-bottom-left-radius: inherit; } .badger-bottom-right { right: 0; border-top-left-radius: .25em; border-bottom-right-radius: inherit; }