Twitter Bootstrap set badge to no fill (or outline)?

Question

Anyone know how to change a twitter bootstrap badge (or label) from solid to outlined?

Answer 1

Add this CSS class to your badge :

.badge-outline {
    color: black;
    border: 1px solid #999;
    background-color: transparent;
}

Create overriden classes for other colors :

.badge-outline.badge-success {
    border-color: #468847;
}

Answer 2

The typical boostrap configuration for badges has these key parts related to your question (spread out in their labels-badges.less):

Current Bootstrap

.badge {
    color: @white;
    background-color: @grayLight;
    /* no border is set, just a border-radius: 9x */
}

.badge {
  // Important (red)
  &-important { background-color: @errorText; }
  &-important[href] { background-color: darken(@errorText, 10%); }

  // Warnings (orange)
  &-warning { background-color: @orange; }
  &-warning[href] { background-color: darken(@orange, 10%); }

  // Success (green)
  &-success { background-color: @successText; }
  &-success[href] { background-color: darken(@successText, 10%); }

  // Info (turquoise)
  &-info { background-color: @infoText; }
  &-info[href] { background-color: darken(@infoText, 10%); }

  // Inverse (black)
  &-inverse { background-color: @grayDark; }
  &-inverse[href] { background-color: darken(@grayDark, 10%); }
}

So you can override it by following that with something like this:

Override in your later LESS code

.badge {
    color: @black;
    background-color: transparent;
    border: 1px solid @grayLight; /* set your border */
}

.badge {
  // Important (red)
  &-important { background-color: transparent;
                border-color: @errorText;
                color: #errorText; /* maybe change color? up to you. */
              }
  &-important[href] { background-color: transparent;
                      border-color: darken(@errorText, 10%); 
                      color: darken(@errorText, 10%); /* ??? */
              }

  etc... for -warning, -success, -info, -inverse
}

Answer 3

Quick bootstrap 4 sass version

@each $color, $value in $theme-colors {
  .badge-outline-#{$color} {
    border: $border-width solid $value;
    color: $value !important;
    background: transparent !important;
  }
}

Answer 4

Bootstrap 5 has support for the effect you want right out of the package. The border classes not only create an outline but allow for control of the color and thickness too.

This example uses border and border-primary on a badge to create the blue outline. To get the "3" to match the color of the outline, it also uses text-primary. Note that it uses just the badge class, not badge-primary because that would also change the background color to blue.

<span class="badge border border-primary text-primary">3</span>