Bootstrap 3.0 Label arrow gist. Add arrows to labels, plus a plain text label. (no background) To use, simply override the default bootstrap mixin by adding your own custom mixins less file and compile and also add a relative position and inline-block display to your custom bootstrap .labels file.

custom-labels.less

.label {
  position: relative;
  display: inline-block;
}

custom-mixins.less

// Labels
// -------------------------
.label-variant(@color) {
  background-color: @color;
  &[href] {
    &:hover,
    &:focus {
      background-color: darken(@color, 10%);
    }
  }
  &.label-arrow.label-top {
    margin-top: .5em;
    &:after {
      content: "";
      position: absolute;
      top: -.4em;
      left: 46%;
      border-left: .3em solid transparent;
      border-right: .3em solid transparent;    
      border-bottom: .6em solid @color;
    }
  }
  &.label-arrow.label-right {
    margin-right: .5em;
    &:after {
      content: "";
      position: absolute;
      top: 38%;
      right: -.5em;
      border-top: .3em  solid transparent;
      border-bottom: .3em  solid transparent;    
      border-left: .6em solid @color;
    }
  }
  &.label-arrow.label-bottom {
    margin-bottom: .5em;
    &:after {
      content: "";
      position: absolute;
      bottom: -.4em;
      left: 46%;
      border-left: .3em solid transparent;
      border-right: .3em solid transparent;    
      border-top: .6em solid @color;
    }
  }
  &.label-arrow.label-left {
    margin-left: .5em;
    &:after {
      content: "";
      position: absolute;
      top: 38%;
      left: -.5em;
      border-top: .3em solid transparent;
      border-bottom: .3em solid transparent;    
      border-right: .6em solid @color;
    }
  }
  &.label-text {
    background: none;
    color: @color;
  }
}