How to remove Boostrap default body style in a component.html

Question

I have a angular widget directive with my own css. when i add my widget in a another application component it's overriding with Bootstrap default css/styles.

Here is my boostrap css

My question is How i can remove font-family in my compoent.css I am trying to override, but its not working?

    body {

line-height: 1.15; 
}

I also tried with !important as follows, but still applying bootstrap styles

body {
  font-family: "Open Sans", sans-serif !important;
}

your css should load after the bootstrap.css... when you run the project localhost:4200 what is the sequence of the CSS files — Akber Iqbal, Jan 23 '20 at 00:06
you probably have a JS filter applied... change that to CSS please — Akber Iqbal, Jan 23 '20 at 00:25
Provide the full `` tag where you are importing your style sheet & bootstrap — EGC, Jan 23 '20 at 02:35
@ShakeerHussain: this is how https://stackoverflow.com/questions/16770176/ — Akber Iqbal, Jan 23 '20 at 05:13

beanic · Answer 1 · 2020-01-24T09:37:24.703

1

Insert your CSS after the bootstrap CSS. If that doesn't work user !important to overwrite the styles you want.

example:

body {
   font-family:none!important;
   line-height: 1.15!important;
}

edited Jan 24 '20 at 09:37

answered Jan 23 '20 at 10:51

beanic

539
6
22

I tried as follows but still defautl styles applying body { font-family: "Open Sans", sans-serif !important; } – Shakeer Hussain Jan 23 '20 at 14:23
I have updated the answer. You have to add "font-family:none!important;" if you want annul that property for all the page. – beanic Jan 24 '20 at 09:39

How to remove Boostrap default body style in a component.html

1 Answers1