Bootstrap cdn overrides my custom css styles in react js

Question

I have designed a web page in ReactJS using CSS. For one of the component I have used Bootstrap for styling. I garbed the latest bootstrap cdn link and pasted it in "index.html" file. When I use that bootstrap link, it overrides few of my custom styles. Each component of my project has a separate CSS and JS file. Please suggest any solution, where should I put that bootstrap link in my project so that it doesn't override my custom css styles. Thanks.

Answer 1

It's smell like wrong css include order. You may check it in browser. To resolve this, you can go through few ways:

1. Try to include bootstrap css as very first link in head section (after meta ).
2. Try to include your css via import in your index.js file.

Second way should be look like this:

import "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css";
import "./styles.css";

Answer 2

It's very simple. Link your custom CSS file just below the bootstrap.css and override the class in your custom.css file.

You can rely on descendant selectors, ID and '.important' notation together to override the styles but that is against the CSS best practices. You can use them only when it is absolutely necessary.

You can simply use this method. Follow the following articles. I hope you help this.

Override Bootstrap CSS styles

CSS Overrides