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

twitter-bootstrap sass less badge outline
Meltemi picture Meltemi · Jan 31, 2013 · Viewed 8.8k times · Source

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

enter image description here

Answer

SJousse picture SJousse · Jan 31, 2013

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

Related questions

How to use bootstrap 4 in angular 2?

I'm building an angular 2 app written in typescript. It would use the bootstrap 4 framework in combination with some custom theming, is this possible? The "ng2-bootstrap" npm package is not working as it doesn't allow me to use the bootstrap …

Read More
What does !default in a css property value mean?

The twitter bootstrap code has a lot of CSS properties with a !default at the end. E.g. p { color: white !default; } What does !default do? UPDATE My bad for not being clear. I am using the SASS part of …

Read More
Bootstrap 4 Change Breakpoints

I have an application where the design calls for a 1280 breakpoint from desktop to tablet, or, xl to lg respectively. However, Bootstrap itself has the xl breakpoint at 1200. I need to change that xl breakpoint globally for bootstrap. Do I …

Read More