CODEWITHSUNDEEP
css
Paramone
Paramone

Reputation: 2724

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.

Upvotes: 0

Views: 188

Answers (4)

Orkun Tuzel
Orkun Tuzel

Reputation: 1432

I would not touch original Bootstrap classes and add my own custom stylesheet that is loaded after Bootstrap css for overriding purposes, which includes a class such as '.label-custom'. Example:

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

Upvotes: 0

Nauman Umer
Nauman Umer

Reputation: 1006

You can simply use :not() and apply an id to the label where you not to add custom style. just like that.

Using Id

CSS

.label:not(#withboot) {
    border-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

HTML

<label class="label">with custom style</label>
<label class="label" id="withboot">with bootstrap style</label>

see here

Using Class

CSS

you can also use class instead of id:

.label:not(.withboot) {
    border-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

HTML

<label class="label">with custom style</label>
<label class="label withboot">with bootstrap style</label>

see here

Upvotes: 1

Den Kison
Den Kison

Reputation: 1084

try to write styles in this way: 

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

then add class rounded on each label that need to be with rounded corners

 <label class="label rounded">...</label>

As a result you will not rewrite bootstrap label class

Upvotes: 2

caramba
caramba

Reputation: 22480

you could add a parent class like

.parent .label { /* styles */}

or

.label.style1 { /* styles */}

Upvotes: 1

Related Questions