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

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

Answer 2

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

Answer 3

Bootstrap glyphicons (a component) is what you're looking for: http://getbootstrap.com/components/#glyphicons

They are designed to work with a broad range of other elements and are easy to use. This is a example from the docs:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

Could be a label, paragraph or similar, too.

Answer 4

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