Jorge
Jorge

Reputation: 18237

cannot override a css

Ok so I have this scenario that I don't understand in the default bootstrap css style sheet the label css is defined like this

label {
    display: block;
    margin-bottom: 5px;
}

Now I override this css in my own stylesheet which is rendered after the bootstrap like this

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  color: #333;
}

Can someone explain me why is browser is still rendering as a display:block?? even if the styles are well defined are good rendered? here's the screen shoot the computed styles

enter image description here

Here's the proof of the override of the style

enter image description here

Update, this is how is rendered the stylesheets

enter image description here

Upvotes: 0

Views: 133

Answers (1)

nico
nico

Reputation: 2121

You need to import your CSS code after Bootstrap that way it will get overwritten.

As pointed out, you can just use "!important" however, this is usually bad practice.

Upvotes: 2

Related Questions