1

I'm working on a project where I need to use Bootstrap alongside a lot of custom CSS files. Until now, I was importing Bootstrap's CSS directly in my index.html file like this :

<link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossorigin="anonymous"
    />

But now I need to import Bootstrap CSS from my node_modules so I've tried to import it in my index.css file like this :

@import "bootstrap/dist/css/bootstrap.min.css";

It is "working" but now, all of Bootstrap CSS declarations, including it's reboots, are overriding my own custom CSS (which wasn't the case until then).

So my question is : is there any way to import a local version of Bootstrap's CSS without having it taking over my custom CSS files ?

I've seen a solution here, but adding a custom body id to ALL my CSS declarations in my many files looks like a bit too much.

isherwood
  • 58,414
  • 16
  • 114
  • 157
FlowRan
  • 119
  • 1
  • 15
  • 1
    You should manage the sequence of imports in your index.css file. For example you should firstly import the `bootstrap.min.css` and after that import the below your `custom` CSS file. – Arslan Ali Oct 21 '21 at 09:41
  • RIght now, I don't import my other CSS files in index.css, I import them directly in the jsx files. Should I ditch my method and import all of them in index.css ? – FlowRan Oct 21 '21 at 12:05
  • Yes, You need to place all css files in one directory. Then Import them in `index.css`. After that don't import them in components it will override the bootstrap css. – Arslan Ali Oct 21 '21 at 12:20

2 Answers2

0

You can import the bootstrap.min.css before your 'custom.css', then it won't override your custom CSS.

Suraj Kumar Hemnani
  • 1
  • 2
0

The solution was to copy bootstrap.min.css inside the public folder and import it in my index.html file. For some reason, it didn't work the first time I tried. For reference, the import is done like this :

<link
      href="css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossorigin="anonymous"
    />
FlowRan
  • 119
  • 1
  • 15