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

krezus · Accepted Answer · 2017-12-14 07:52:36Z

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, 2017 at 7:52

krezus

1,4611 gold badge15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

colouredFunk Over a year ago

Same issue as above

krezus Over a year ago

Have you added the css <link> in your main html?

colouredFunk Over a year ago

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...

krezus Over a year ago

probably it is about the version of angular and bootstrap. please check this

Agam Over a year ago

Worked for me. Need to restart ng serve.

|

Collectives™ on Stack Overflow

Bootstrap and Angular 4 - Ng overriding CSS

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related