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?

enter image description here

score 11 · Answer 1 · answered Jan 31 '13 at 10:55

11

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

answered Jan 31 '13 at 10:55

SJousse

691
6
15

score 6 · Answer 2 · answered Jun 14 '20 at 23:21

6

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

answered Jun 14 '20 at 23:21

b4sass

61
1
1

score 6 · Answer 3 · answered Apr 20 '22 at 19:09

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>

I tried manipulating border width of the outline using border-5 for example, which should affect the border thickness. But it does not work with badge outlines, it seems. — Tore Aurstad, Apr 30 '23 at 21:25

score 4 · Answer 4 · edited Nov 01 '19 at 19:58

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
}

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

4 Answers4