How to create a Label with close icon in Bootstrap?

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;
}

With Bootstrap 4 it could be done with

<span class="badge badge-primary">
  Dismissable badge
  <button type="button" class="close" aria-label="Dismiss">
    <span aria-hidden="true">&times;</span>
  </button>
</span>

and

.badge {
  .close {
    padding-right: $badge-padding-x;
    padding-left: $badge-padding-x;
    margin-right: -$badge-padding-x;
    font-size: inherit;
    color: inherit;
    text-shadow: none;
  }
}

It realized it PR https://github.com/twbs/bootstrap/pull/26823 but still didn't merged in master (delayed to v5).

Demo: https://codepen.io/gijsbotje/pen/OjOmby

@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;
}