How to create a Label with close icon in Bootstrap?

Question

With Bootstrap 3, what might be a good way of getting a bordered label with close icon? An example of the sort of thing from Stack Overflow:

Answer 1

I ended up with http://jsfiddle.net/7zkCU/30/ (adapted from http://maxwells.github.io/bootstrap-tags.html):

<span class="tag label label-info">   <span>Example Tag</span>   <a><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a>  </span> 

CSS:

.tag {   font-size: 14px;   padding: .3em .4em .4em;   margin: 0 .1em; } .tag a {   color: #bbb;   cursor: pointer;   opacity: 0.6; } .tag a:hover {   opacity: 1.0 } .tag .remove {   vertical-align: bottom;   top: 0; } .tag a {   margin: 0 0 0 .3em; } .tag a .glyphicon-white {   color: #fff;   margin-bottom: 2px; } 

Answer 2

@user3364825 - Thank you for posting your solution! It is a simple and elegant solution for displaying search filter tags.

I modified the CSS slightly, just so the tags are a little more responsive. The modified CSS addresses two issues:

1. Tags will now wrap and stack vertically for smaller viewports.
2. Tags previously would extend beyond the parent container if the tag was wider than the parent container. Tags will shrink if they are too wide and display an ellipsis (...) at the end of the caption when the tag is too long.

Here is the modified CSS:

.tag {   font-size: 12px;   padding: 0.3em 0.4em 0.3em;   margin: 2px 1px !important;   display: inline-block;   max-width: 100%; }  .tag > span {   display: inline-block;   max-width: 94%;   white-space: nowrap;   overflow: hidden;   -ms-text-overflow: ellipsis;   -o-text-overflow: ellipsis;   text-overflow: ellipsis; }  .tag a {   display: inline-block;   color: #bbb;   cursor: pointer;   opacity: 0.6;   margin: 0 0 0 0.3em; }  .tag a:hover {   opacity: 1.0; }  .tag a .glyphicon-white {   color: #fff;   margin-bottom: 2px; }  .tag .remove {   vertical-align: bottom;   top: 0; }