7

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.

xiang
  • 95
  • 2
  • 10
  • you try to use !important ? you have same name class? – Simone Rossaini Jun 29 '20 at 05:58
  • no, i used own custom class names in my css files. The issues are in navbar, footer and one table where i used float property for displaying content to left or right. – xiang Jun 29 '20 at 06:13

2 Answers2

5

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";
PasVV
  • 564
  • 3
  • 11
  • I included bootstrap css just below tag in the head section but it is still overriding. I used import './style.css' in .js file and also tried to include the file in index.html through link tag, but still not working. – xiang Jun 29 '20 at 06:32
  • Did you try to import bootstrap before import `./style.css` in your js? Please, look at my updated post. – PasVV Jun 29 '20 at 06:39
  • Yes I did that way too, but still no luck. Below is how i did. I tried importing bootstrap css in the same component too where I actually need to but It is making changes to every component's css. import React, { Component } from 'react'; import 'bootstrap/dist/css/bootstrap.css'; import './App.css'; – xiang Jun 29 '20 at 07:00
  • Just to be clear: Did you remove bootstrap include in `index.html` file? – PasVV Jun 29 '20 at 07:04
  • Yes I removed it from index.html and then checked it. Anyways thank you for your help. I now made changes to my custom css and styled accordingly, so everything is fine. – xiang Jun 29 '20 at 07:24
-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

Lahiru Supunchandra
  • 358
  • 1
  • 9