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 #178.

[gaearon]

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