Bootstrap and Angular 4 - Ng overriding CSS

Question

I've imported bootstrap CSS into the Angular global style.css, however, the bootstrap styles are being overridden by Angular. For example, my markup renders as this -

<div _ngcontent-c0="" class="container">

but because of the _ngcontent the following CSS gets applied:

margin: 0;
padding: 0;
border: 0;
font-family: inherit

score 4 · Answer 1 · answered Dec 14 '17 at 07:52

4

you can change the order of styles that defined in angular-cli.json file.

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],

you should restart your server since angular-cli does not looks for changes in angular.cli.json

answered Dec 14 '17 at 07:52

krezus

1,281
1
13
29

Same issue as above – colouredFunk Dec 14 '17 at 08:28
Have you added the css in your main html? – krezus Dec 14 '17 at 08:34
no, the css gets injected, but angular overrides it.... I don't think I need to add it into the index.html as I added it to the angular-cli.json. Currently the bootstrap CSS is in node_modules, if I was to add it in the index.css, I would need to move the files into the src directory... – colouredFunk Dec 14 '17 at 08:58
probably it is about the version of angular and bootstrap. please check [this](https://stackoverflow.com/questions/37649164/how-to-add-bootstrap-to-an-angular-cli-project) – krezus Dec 14 '17 at 09:27
2

Worked for me. Need to restart ng serve. – Agam Apr 04 '18 at 21:23
You are Genius!:) – StepUp Jul 03 '19 at 18:42

Bootstrap and Angular 4 - Ng overriding CSS

1 Answers1