37

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:

enter image description here

1
  • @davidkonrad -- thanks, that got me looking at Bootstrap tag projects (I found one slightly closer to what I wanted, posted below) Mar 14, 2014 at 10:01

5 Answers 5

46

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

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

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

1
  • This is a good approach for Bootstrap 3 as well (with css converted to Less).
    – Soulriser
    Jul 13, 2019 at 16:41
5

Bootstrap glyphicons (a component) is what you're looking for: https://getbootstrap.com/docs/3.4/components/

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.

2
  • Since this answer already has 5 upvotes , i think the link used to work once. Now it redirects to Accordion component. The correct link for glyphicons now is : getbootstrap.com/docs/3.3/components
    – Avi R
    Sep 13, 2021 at 11:50
  • Thank you, Avi R, I edited the link! Unfortunately the restructured docs don't support page anchors... Sep 14, 2021 at 11:25
0

This is a solution for Bootstrap 4 that does not require CSS additions :

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body class="container text-center">
  <h1>Bootstrap 4 badge with close icon example</h1>
  <div class="d-flex">
    <div class="mr-2 d-flex align-items-center badge badge-light">
      Badge Light
      <button type="button" class="pb-1 ml-1 close"><span aria-hidden="true">×</span></button>
     </div>
    <div class="mr-2 d-flex align-items-center badge badge-dark">
      Badge Dark
      <button type="button" class="pb-1 ml-1 close text-white"><span aria-hidden="true">×</span></button>
     </div>
  </div>
</body>

Codepen link : https://codepen.io/lucasroquilly/pen/xxQeLeL

Not the answer you're looking for? Browse other questions tagged or ask your own question.