<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"> <h2>Labels & Badges</h2> <div class="row"> <div class="col-md-4"> <hr/> <p> <span class="label">Default</span> <span class="label label-success arrowed"> Success</span> <span class="label label-warning">Warning</span> <span class="label label-important arrowed-in">Important</span> <span class="label label-info arrowed-in-right arrowed">Info</span> <span class="label label-inverse">Inverse</span> </p> <hr/> </div> <div class="col-md-4"> <hr/> <p> <span class="badge">1</span> <span class="badge badge-grey">1</span> <span class="badge badge-success">2</span> <span class="badge badge-warning">4</span> <span class="badge badge-important">6</span> <span class="badge badge-info">8</span> <span class="badge badge-purple">3</span> <span class="badge badge-inverse">10</span> <span class="badge badge-pink">11</span> <span class="badge badge-yellow">2</span> </p> <hr/> </div> <div class="col-md-4"> <hr/> <p> <span class="label label-large label-pink arrowed-right">Larger</span> <span class="label label-large label-yellow arrowed-in">Yellow</span> <span class="label label-large label-purple">Purple</span> <span class="label label-large label-grey arrowed-in-right arrowed-in">Grey</span> <span class="label label-large label-light arrowed-in-right">Light</span> </p> <hr/> </div> </div> </div> </div>

.label { border-radius: 0; text-shadow: none; font-size: 11px; font-weight: normal; padding: 3px 5px 3px; background-color: #abbac3!important } .label[class*="span"][class*="arrow"] { min-height: 0 } .badge {text-shadow: none; font-size: 12px; padding: 1px 15px; font-weight: normal; line-height: 15px; background-color: #ABBAC3!important; } .label-transparent, .badge-transparent { background-color: transparent!important } .label-grey, .badge-grey { background-color: #a0a0a0!important } .label-info, .badge-info { background-color: #3a87ad!important } .label-primary, .badge-primary { background-color: #2283c5!important } .label-success, .badge-success { background-color: #82af6f!important } .label-important, .badge-important { background-color: #d15b47!important } .label-inverse, .badge-inverse { background-color: #333!important } .label-warning, .badge-warning { background-color: #f89406!important } .label-pink, .badge-pink { background-color: #d6487e!important } .label-purple, .badge-purple { background-color: #9585bf!important } .label-yellow, .badge-yellow { background-color: #fee188!important } .label-light, .badge-light { background-color: #e7e7e7!important } .badge-yellow, .label-yellow { color: #963!important; border-color: #fee188 } .badge-light, .label-light { color: #888!important } .label.arrowed, .label.arrowed-in { position: relative; margin-left: 9px } .label.arrowed:before, .label.arrowed-in:before { display: inline-block; content: ""; position: absolute; left: -14px; top: 0; border: 9px solid transparent; border-width: 9px 7px; border-right-color: #abbac3 } .label.arrowed-in:before { border-color: #abbac3; border-left-color: transparent!important; left: -9px } .label.arrowed-right, .label.arrowed-in-right { position: relative; margin-right: 9px } .label.arrowed-right:after, .label.arrowed-in-right:after { display: inline-block; content: ""; position: absolute; right: -14px; top: 0; border: 9px solid transparent; border-width: 9px 7px; border-left-color: #abbac3 } .label.arrowed-in-right:after { border-color: #abbac3; border-right-color: transparent!important; right: -9px } .label-info.arrowed:before { border-right-color: #3a87ad } .label-info.arrowed-in:before { border-color: #3a87ad } .label-info.arrowed-right:after { border-left-color: #3a87ad } .label-info.arrowed-in-right:after { border-color: #3a87ad } .label-primary.arrowed:before { border-right-color: #2283c5 } .label-primary.arrowed-in:before { border-color: #2283c5 } .label-primary.arrowed-right:after { border-left-color: #2283c5 } .label-primary.arrowed-in-right:after { border-color: #2283c5 } .label-success.arrowed:before { border-right-color: #82af6f } .label-success.arrowed-in:before { border-color: #82af6f } .label-success.arrowed-right:after { border-left-color: #82af6f } .label-success.arrowed-in-right:after { border-color: #82af6f } .label-warning.arrowed:before { border-right-color: #f89406 } .label-warning.arrowed-in:before { border-color: #f89406 } .label-warning.arrowed-right:after { border-left-color: #f89406 } .label-warning.arrowed-in-right:after { border-color: #f89406 } .label-important.arrowed:before { border-right-color: #d15b47 } .label-important.arrowed-in:before { border-color: #d15b47 } .label-important.arrowed-right:after { border-left-color: #d15b47 } .label-important.arrowed-in-right:after { border-color: #d15b47 } .label-inverse.arrowed:before { border-right-color: #333 } .label-inverse.arrowed-in:before { border-color: #333 } .label-inverse.arrowed-right:after { border-left-color: #333 } .label-inverse.arrowed-in-right:after { border-color: #333 } .label-pink.arrowed:before { border-right-color: #d6487e } .label-pink.arrowed-in:before { border-color: #d6487e } .label-pink.arrowed-right:after { border-left-color: #d6487e } .label-pink.arrowed-in-right:after { border-color: #d6487e } .label-purple.arrowed:before { border-right-color: #9585bf } .label-purple.arrowed-in:before { border-color: #9585bf } .label-purple.arrowed-right:after { border-left-color: #9585bf } .label-purple.arrowed-in-right:after { border-color: #9585bf } .label-yellow.arrowed:before { border-right-color: #fee188 } .label-yellow.arrowed-in:before { border-color: #fee188 } .label-yellow.arrowed-right:after { border-left-color: #fee188 } .label-yellow.arrowed-in-right:after { border-color: #fee188 } .label-light.arrowed:before { border-right-color: #e7e7e7 } .label-light.arrowed-in:before { border-color: #e7e7e7 } .label-light.arrowed-right:after { border-left-color: #e7e7e7 } .label-light.arrowed-in-right:after { border-color: #e7e7e7 } .label-grey.arrowed:before { border-right-color: #a0a0a0 } .label-grey.arrowed-in:before { border-color: #a0a0a0 } .label-grey.arrowed-right:after { border-left-color: #a0a0a0 } .label-grey.arrowed-in-right:after { border-color: #a0a0a0 } .label-large { font-size: 13px; padding: 3px 8px 4px } .label-large.arrowed, .label-large.arrowed-in { margin-left: 12px } .label-large.arrowed:before, .label-large.arrowed-in:before { left: -16px; border-width: 11px 8px } .label-large.arrowed-in:before { left: -12px } .label-large.arrowed-right, .label-large.arrowed-in-right { margin-right: 11px } .label-large.arrowed-right:after, .label-large.arrowed-in-right:after { right: -16px; border-width: 11px 8px } .label-large.arrowed-in-right:after { right: -12px }