default bootstrap is overriding my custom css in react

Akshay Gautam 0
Viewed 40

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.

cdn reactjs css
3 Answers

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!

Nikola Cvetic0

As you haven't added any codes example or link of your live project, please check if CSS file has been linked properly. Go to page source and click on styles.css. It should open all your codes inside CSS file. If you can't open this file, or there's nothing found, you should check CSS file linking once again. But if you can see css file properly but still not working, as a final option, you can use "!important" in CSS class. It will work fine.

Shah Muhammad Jannatul Hasan0

  1. Install bootstrap as npm package using npm i bootstrap. Then place your styles.css in the src folder and import styles.css in your App.jsx.

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

  2. Or you can even try using !important. This will definitely work but you will need to to it every time you want to override a style.

Satej Bidvai0
Related