Paramone Paramone - 10 months ago 33
CSS Question

How to override overridden class -- CSS

We're using bootstrap.
We've override the '.label' class so that it's square, to fit the websites' design.

However, now I want to use the original '.label' from bootstrap, with the round corners.

Current css code

.label {
border-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;

How could I override the overridden class?

Okay, so a lot of your answers were a possibility, but since we were overriding the (bootstrap) 'label' class from the start, I didn't have the css settings to recreate the label.

However, what I ended up with (same .css settings as the bootstrap one) is:

.label-details {
display: inline-block;
font-size: 100%;
font-weight: 100;
line-height: 1.2;
padding: .2em .6em .3em;
color: #666666;
white-space: normal;
margin: 0;
text-align: left;
box-sizing: initial;
background-color: #f0ad4e;
border-radius: 6px 6px;

I agree that this isn't the best method, but we're (probably) only going to use a label like this only once.


you could add a parent class like

.parent .label { /* styles */}


.label.style1 { /* styles */}