Cannot change body font-size when bootstrap is being used

1

So it is exactly like I put on the title. I am using Bootstrap 4.5.2 and I notice when bootstrap is on, whatever font-size I set for body won’t work. I then have 3 options:

  • Either using !important modifier
  • Or change specific element font-size, for example p, h1, etc
  • Or, I have to disable Bootstrap

I even tried wrapping everything inside another div inside body but it won’t help.
Is there any way I can both keep using Bootstrap and not having to use !important?
Well even if it doesn’t exist, I would be happy with an explanation.
Thank you very much, guys.

2

If you had some code it may be easier to understand the situation. But the reason why may be that Bootstrap styling is inline which takes precedence over the styling in your css file.
https://www.w3schools.com/css/css_specificity.asp

1 Like
3

Thank you man I have just realized a simple mistake that I did, based on your suggestion.
I have accidentally loaded my css before bootstrap, and that’s why bootstrap overrides it.

css
css1155×192 11.3 KB

When I move my css below bootstrap, things work out just fine.
Big lesson. Thank you. Have a good day!