Custom CSS Being Overridden by Bootstrap CSS

custom css being overridden by bootstrap css

Specificity

Your issue is most likely regarding specificity. Chris Coyier has a great article on CSS specificity. I would also suggest you check out this handy specificity calculator.

Using that calculator, we can see that .table-striped > tbody > tr:nth-child(odd) > td has a specificity of 23. As such, to override that, any new rule needs to have a specificity of something equal to or greater than 23. .red is at 10, so that isn't going to cut it.

In this case, it should be as simple as matching the existing specificity, and then adding your class to it. .table-striped > tbody > tr:nth-child(odd) > td.red gives us a specificity of 33. As 33 is greater than 23, your rule should now work.

See a working example here: http://bootply.com/91756

!important

In general, you should never use !important unless you never want that rule to be overridden. !important is basically the nuclear option. I am moderately confident in saying that if you understand specificity, you should never need to !important to make a custom rule work properly in a framework like Bootstrap.

Update

After a bit of thought, the rule I provide here is probably a bit too specific. What happens if you want to higlight a cell on a table that isn't stripped? To make your rule a bit more global while still having enough specificity to work in stripped tables, I would go with .table > tbody > tr > td.red. This has the same specificity as the Bootstrap stripping, but will also work on tables that are not zebra stripped. Updated example is here: http://bootply.com/91760

custom css cannot override bootstrap css

I think the problem is that your css file is properly linked or not linked at all to your HTML page. You should check that first

External stylesheet not overriding bootstrap

You need to look at CSS Specificity rules. Just because you define a rule doesn't automatically mean it overrides a rule declared earlier.

Specificity is calculated on 4 factors abcd:

a     (1 if inline, 0 if in a file),
b     number of IDs in CSS rule
c     number of attribute selectors, classes and pseudo-classes,
d     number of element names and pseudo-elements.

The rule with the largest 4 digit number abcd wins and overrides lesser declarations, so inline declarations will override anything declared in an included CSS file.

Custom CSS not overriding Bootstrap CSS

Move your MainStyleSheet.css file outside your App_Code folder. App_Code folder has a default Compile build action instead of Content.

How to avoid bootstrap css overriding the custom css?

Without seeing the actual code its impossible to give you an actual markup for your situation. However, at the root of the problem is Specificity. You can read more about it here.

Basically, the more selectors you use in your CSS, the higher it will rank in specificity. For example, referencing your HTML above,

.text-title {}

is not very specific.

.label-text .text-title {}

is more specific and will take precedence.

.label .label-text .text-title {}

is even more specific. And:

div.label > .label-text > .text-title {}

is yet even more specific and will take precedence over all the others.

So the solution to the problem is that your CSS needs to get more specific than the Boostrap CSS. Inspect the problem elements in the browser and see what selectors Bootstrap is using. Then use more specific ones in your custom CSS.

Unfortunately, Bootstrap uses !important in a number of situations, so you will be forced to use it as well to over ride theirs.

Custom CSS Being Overridden by Bootstrap CSS