Why Bootstrap CSS Is Not Overriding in Other Project with The Same Code

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.

Other CSS Specificity articles

CSS Tricks
Specificity calculator

Possible Solutions

It's generally not a good idea to change 'base' styles or to override Bootstrap styles directly.

You can override other declarations by adding !important to your rules, but this is generally regarded as a poor solution.
Add your own class and/or id to elements which you wish to customise.
If you wish to have a quick effect, then you can add your own specific id or class to the body element and then declare your rules relying on descendents of that id or class. Using an id in this way will give your rules a specificity of 01xx in a file, which will probably be enough to override Bootstrap rules.

e.g

CSS in file:

#mypage ul {
    list-style-type:none;
}

HTML:

<body id="mypage">
...
   <ul>
   </ul>
</ul>

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.

Can't override CSS in bootstrap

It might say "invalid property value" because 30 is not a unit - it should be 30px.

If that's still not overwriting, you have a few options.

First, the CSS rule in Bootstrap may have a higher level of specificity - you should check in the browser Dev Tools to see what the original selector is that's applying the margin you're trying to overwrite. For example, nav.navbar is more specific than .navbar and will match with higher priority even if it comes earlier in the CSS.

If all else fails, make the rule important (though this is usually to be avoided and is strictly for tricky overrides):

.navbar {
    margin-bottom: 30px !important; 
}

CSS class not overriding bootstrap

You use .jamClass on image, then the style should be like,

img.jamClass { width: 50px; } if this is not work try to use more parent class to prior high.

.navbar-header img.jamClass { width: 50px; } or

.navbar .navbar-header img.jamClass { width: 50px; }

NOTE: You should try to not use !important

Not able to override Bootstrap in Angular 7 app

remove bootstrap.min.css from angular.json.

....
"styles": [
   "node_modules/font-awesome/css/font-awesome.min.css",
   "src/styles/styles.scss",
],
....

import bootstrap.scss file.
```
@import "~bootstrap/scss/bootstrap";
```

set $breadcrumb-divider before @import statements.

$breadcrumb-divider: none;

@import "~bootstrap/scss/bootstrap";
...