Overriding bootstrap styles

[joewoodhouse]

Hi guys,

This is probably a very stupid question, but ...

I've imported bootstrap into my create-react-app project as per the documentation (very nice).

However when I look at the generated markup, all the <style> tags for my components e.g. Header.css come before the bootstrap css, which means I can't (easily) override bootstraps default styling.

Is there a way to ensure bootstrap gets put before other css files?

[viankakrisna]

Can you provide the snippets of your index.js (especially the import section)?

[joewoodhouse]

My index.js is simply:

import React from 'react';
import ReactDOM from 'react-dom';
import { browserHistory } from 'react-router';

import Routes from './routes';

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

import './index.css';

ReactDOM.render(
  <Routes history={browserHistory} />,
  document.getElementById('root')
);

[viankakrisna]

try to move the css imports above import Routes from './routes'; I think that's because style-loader reads the css imported from components in Routes first rather than bootstrap. like this

import React from 'react';
import ReactDOM from 'react-dom';
import { browserHistory } from 'react-router';

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

import './index.css';

import Routes from './routes';

ReactDOM.render(
  <Routes history={browserHistory} />,
  document.getElementById('root')
);

And see if it works

[joewoodhouse]

Yes that does work, thanks very much! I wonder if that might be worth adding to the "Add Bootstrap" section of the docs, as it's not made clear there.

[viankakrisna]

PR?

[Timer]

@joewoodhouse if you could add a note about this to the Adding Bootstrap section, that would be great!

[grundmanise]

This is what worked for me:

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

import React from 'react';
import ReactDOM from 'react-dom'
import Routes from './app/routes'


ReactDOM.render(
  <Routes />,
  document.getElementById('root')
);

[jaredgalanis]

For some reason this is not working for me. The index.js file does look different at this point. There's no import of Routes.

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

import './index.css';
import './SelectOption.css';

import React from 'react';
import ReactDOM from 'react-dom';

import PlayerContainer from './PlayerContainer';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<PlayerContainer />, document.getElementById('root'));
registerServiceWorker();