Reputation: 18237
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
Here's the proof of the override of the style
Update, this is how is rendered the stylesheets
Upvotes: 0
Views: 133
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