1

I'm using bootstrap modal for my React project which needs this:

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
  crossorigin="anonymous"
/>

I have put that link in my index.html, everything is fine, but problem is that for some reason it is affecting all my h1, h2, h3, h4, h5, h6 elements. It gives them different sizes, and those are not inside any bootstrap container or such, how to prevent the library from doing that?

isherwood
  • 58,414
  • 16
  • 114
  • 157

3 Answers3

0

Those actually are in the Bootstrap CSS file. Take a look at the unminified CSS files (just remove .min from the URL), and you'll see stuff like this:

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}

As one can see, h1, etc. are all globally modified in Bootstrap, even if they're not in a bootstrap container. To solve this, you can either go into the linked CSS file and remove the class styles for h1 and others that conflict, or pull out just the classes you need for your modal. You could also re-compile Bootstrap's CSS to exclude that stuff (check out the documentation -- although this will likely take longer, it's probably better practice, if that matters for this project).

Good luck!

isherwood
  • 58,414
  • 16
  • 114
  • 157
Nisala
  • 1,313
  • 1
  • 16
  • 30
  • if i remove .min then i cant toggle modal ! i will loose that functionality –  Mar 11 '21 at 15:57
  • You won't, don't worry! .min has everything the normal CSS file does, the .min file is just smaller. Re-check your modal implementation. (Also, if you just removed .min in the you had in your question, remove the integrity attribute -- you've changed the file, so if you don't remove it it'll stop the file from getting loaded in because the integrity doesn't match.) – Nisala Mar 11 '21 at 15:58
  • i did it now the toggle works, but modal does not pop up, it just toggle it like nomal div –  Mar 11 '21 at 16:01
  • how to prevent it affecting headers ? or how to give headers its normal default sizes ? –  Mar 11 '21 at 16:03
  • As I mentioned in my answer, the easiest solution is just to delete the styles that affect headers in the global level (like the ones I put in the code block on my answer) from the CSS file. Just ctrl-f around the file and look around. You'll have to download it and link it locally to do that (because you can't edit what the CDN serves, of course). – Nisala Mar 11 '21 at 16:05
  • how to download it and link it locally, could you possibly help with that also ? –  Mar 11 '21 at 16:07
  • it would be too complicated, is there a way to give headers its default size ? –  Mar 11 '21 at 16:07
  • To download, you can just go to the link and copy-paste the CSS into a new local CSS file, and link that. It's not that complicated to remove what you need -- you'll see that if you ctrl-f for `h1`, there's only 6 matches, and one of them is the new size calculation that Bootstrap does. Just remove all of that. – Nisala Mar 11 '21 at 16:15
  • i did exactly as u said but not modal wont pop up, just toggle works without pop up –  Mar 11 '21 at 22:19
0

Bootstrap has some basic styling for multiple HTML tags,

To prevent you can overwrite the CSS inline or using own stylesheet.

or you can download Bootstrap locally and edit it as per your requirements.

Aniket Das
  • 367
  • 1
  • 6
  • 17
0

By design, HTML heading elements (and a lot of other elements) don't have to be inside a Bootstrap container, row or column to be affected by the Bootstrap's CSS. This means all h1, h2, h3, h4, h5, h6 elements will be affected by Bootstrap's CSS regardless of the project. What you should do is override the default Bootstrap style to your own taste.

meshachviktor
  • 45
  • 1
  • 6