-1

How can I delete a specific css property in Bootstrap3 ?

I work with another template from HTML5up. But I'd like to use Bootstrap too for its carousel. I've got conflicts between them. So, I inspected the code with the Firefox debugger and the Bootstrap code seems to be getting priority on my other CSS code. I tried to write my code in main.css, but it's always the Bootstrap code is retained and not my code. I think I should delete or remove the properties I don't need.

More precisely, I want to change a font-size to my p in my body. I write font-size:21px; in a main.css but in bootstrap code is 14px for default. All my texts are in 14px. The same with the property line-height who's different in bootstrap code.

What is the best way to avoid incompatibilities ?

codechurn
  • 3,870
  • 4
  • 45
  • 65
Arcelli Annabelle
  • 21
  • 3

2 Answers2

2

Load your custom CSS stylesheet after the bootstrap.css or bootstrap.css.min to ensure that your custom overridden properties effectively override Bootstrap's.

<link rel="stylesheet" href="https://path/to/bootstrap.css">
<link rel="stylesheet" href="https://path/to/main.css">

Removing/adding properties to bootstrap.css will make it difficult to maintain/update as new version come out.

Alexander Staroselsky
  • 37,209
  • 15
  • 79
  • 91
  • Optionally, if it is a CSS selector precedence issue you can use the !important on your declarations in main.css ie: `font-size: 21px !important` – codechurn Jan 11 '17 at 17:39
  • Yes, I all ready have place bootstrap.css in first position. What helped me has been to use the CSS !important attribute. – Arcelli Annabelle Jan 12 '17 at 09:33
0

You can just use font-size: 21px !important;

See here as to why it may not be wise to use !important

Community
  • 1
  • 1
Mahbubur Rahman
  • 361
  • 2
  • 8