Create-react-app: How to include bootstrap?

[dharmesh-khandelwal]

I am building an app using create-react-app and bootstrap. But I am not able to import bootstrap in my app. I tried including it in index.html like this:

        <script src="lib/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="lib/css/bootstrap.min.css">

but it does not work.
So, how can I import bootstrap in my app? Thanks

[dharmesh-khandelwal]

Turns out, I have to add src/ to the source, I did this and it worked in development.

          <script src="src/lib/js/bootstrap.min.js"></script>
          <link rel="src/stylesheet" href="lib/css/bootstrap.min.css">

[gaearon]

Let's keep it open for now. I want to make sure this works well both for development and production, and that we document it.

[dharmesh-khandelwal]

Well, if react-router is being used, then above method will work only for the home route. Finally, I settled with the following in index.html:

        <script src=".././src/lib/js/jquery.min.js"></script>
        <script src=".././src/lib/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href=".././src/lib/css/bootstrap.min.css">

For me, this works for all the routes.
For production, I think we need to copy that lib (vendor/assets) folder from src to the build directory. #28

[gaearon]

Yes, this will be a part of #28. I will look at it this week.

[taion]

For the CSS it should probably be

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

BTW.

Bootstrap ships built CSS in their npm package.

[scwood]

For the CSS it should probably be

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

How can I get this to work? When I npm install bootstrap and use that import statement, it says the loader can't parse the file correctly.

Compiling...
Failed to compile.

Error in ./~/bootstrap/dist/css/bootstrap.css
Module parse failed: /Users/spencer/code/day-by-day-webapp/node_modules/bootstrap/dist/css/bootstrap.css Unexpected token (8:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (8:5)
 @ ./src/index.js 39:0-43

[SpencerCDixon]

It's probably failing on the fonts that need to be loaded properly. Does the create-react-app's webpack config include the appropriately font loaders?

[scwood]

The weird thing is if I move bootstrap.css directly into my src folder and import it relatively it works fine... any ideas?

[taion]

Sounds like paths.appNodeModules is broken here: https://github.com/facebookincubator/create-react-app/blob/ca7d227ae0354e04941ba0e4f76c0bcbf3050dfa/config/webpack.config.dev.js#L55.

[taion]

Oh, it was fixed in https://github.com/facebookincubator/create-react-app/pull/178.

[gaearon]

The fix will be out in 0.2.0 but you can try using alpha for now: #190

[isaklafleur]

@taion answer helped me, but maybe anyone are interested in a bit more detailed instruction so here it goes... ;)

I'm using React 15.5.4...

1. npm install --save bootstrap
2. add import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; to index.js file so you have Bootstrap working in the whole app.
3. add Primary in App.js and you should be able to see a blue bootstrap button.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './index.css';

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

App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <button type="button" className="btn btn-primary">Primary</button>
      </div>
    );
  }
}

export default App;

[Robust1308]

Import Bootstrap CSS by adding import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; is working fine, but how about the Bootstrap JS can I do the same?

Because I got a problem with BootStrap JS in React-Component
You can view the problem here: https://stackoverflow.com/questions/44539398/react-scripts-import-bootstrap-not-working?noredirect=1#comment76072289_44539398

[FDiskas]

Still wandering why in create react app there is no scss support. People are using this for ages and this could solve this issue

[cr101]

@FDiskas Currently there is support for pre-processors (from SASS to CSS) but unfortunately, you can can't include the .scss files. Hopefully, SASS support will come soon.

[inthelightofthetruth]

HAS SASS support come as yet?

[ghost]

@Franzresonates Hi, I'm currently using bootstrap-sass and sass now. And I use import css from './sass/app.sass'; seems fine with dev and prod.

[FDiskas]

@jacoahmad which creat-react-app version you are using?

[subelsky]

I followed @isaklafleur's advice but node complained about importing a file that was outside of src/. I had to do this to make it work:

ln -s node_modules/bootstrap/dist/css/bootstrap.min.css src/bootstrap.min.css

[pimvanderheijden]

@subelsky

How will you proceed in production?

[cool88]

I want to include the bootstrap from the CDN to divert the bandwidth from my own server instead of including it using a node_module. Does the question make sense?

[Timer]

@cool88 edit your public/index.html and add the required script/link tags 😄

I'll lock this issue because it's hard to track things in old issues. Please file a new issue if you need help.