Search code examples
cssreactjscdn

default bootstrap is overriding my custom css in react

Link to project picture

I am creating a project in react and needed bootstrap. But it is overriding my custom css. Some of default bootstrap changing my headings. I have tried everything like putting my css link below bootstrap and also importing it into my index.js file but nothing working. i have attached the picture of my project.

Solution

  • Try maybe using bootstrap as a dependency:

    npm i bootstrap

    and import in index.js:

    import 'bootstrap/dist/css/bootstrap.min.css';

    or even try a react-bootstrap dependency

    npm i react-bootstrap

    Bootstrap is written with !important rules, so they has the highest priority if given! Maybe you can try inline css in React elements (although not recomended in a simple HTML)

    All the best!