Skip to content

How to include bootstrap? #201

New issue
New issue
Closed
Closed
How to include bootstrap?#201
Milestone
 
0.2.0
@dharmesh-khandelwal

Description

@dharmesh-khandelwal
dharmesh-khandelwal
opened on Jul 26, 2016 · edited by 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

Activity

dharmesh-khandelwal

dharmesh-khandelwal commented on Jul 26, 2016

@dharmesh-khandelwal
dharmesh-khandelwal
on Jul 26, 2016
Author

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">
dharmesh-khandelwal
closed this as completedon Jul 26, 2016
gaearon
reopened this on Jul 26, 2016
gaearon

gaearon commented on Jul 26, 2016

@gaearon
gaearon
on Jul 26, 2016
Contributor

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

dharmesh-khandelwal commented on Jul 26, 2016

@dharmesh-khandelwal
dharmesh-khandelwal
on Jul 26, 2016 · edited by dharmesh-khandelwal
Author

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

gaearon commented on Jul 26, 2016

@gaearon
gaearon
on Jul 26, 2016
Contributor

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

taion

taion commented on Jul 26, 2016

@taion
taion
on Jul 26, 2016

For the CSS it should probably be

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

BTW.

Bootstrap ships built CSS in their npm package.

scwood

scwood commented on Jul 28, 2016

@scwood
scwood
on Jul 28, 2016 · edited by 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

SpencerCDixon commented on Jul 28, 2016

@SpencerCDixon
SpencerCDixon
on Jul 28, 2016

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

scwood commented on Jul 28, 2016

@scwood
scwood
on Jul 28, 2016

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

taion

taion commented on Jul 28, 2016

@taion
taion
on Jul 28, 2016

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

taion

taion commented on Jul 28, 2016

@taion
taion
on Jul 28, 2016

Oh, it was fixed in #178.

gaearon

gaearon commented on Jul 28, 2016

@gaearon
gaearon
on Jul 28, 2016
Contributor

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

gaearon
added this to the 0.2.0 milestone on Jul 28, 2016
gaearon
closed this as completedon Jul 28, 2016
isaklafleur

isaklafleur commented on Jun 9, 2017

@isaklafleur
isaklafleur
on Jun 9, 2017

@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

Robust1308 commented on Jun 14, 2017

@Robust1308
Robust1308
on Jun 14, 2017 · edited by 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

FDiskas commented on Jun 30, 2017

@FDiskas
FDiskas
on Jun 30, 2017

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

cr101 commented on Jun 30, 2017

@cr101
cr101
on Jun 30, 2017 · edited by cr101
Contributor

@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.

franzitobambino

franzitobambino commented on Aug 23, 2017

@franzitobambino
franzitobambino
on Aug 23, 2017

HAS SASS support come as yet?

ghost
FDiskas

FDiskas commented on Sep 7, 2017

@FDiskas
FDiskas
on Sep 7, 2017

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

subelsky

subelsky commented on Nov 4, 2017

@subelsky
subelsky
on Nov 4, 2017

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

pimvanderheijden commented on Dec 27, 2017

@pimvanderheijden
pimvanderheijden
on Dec 27, 2017 · edited by pimvanderheijden

@subelsky

How will you proceed in production?

cool88

cool88 commented on Jan 2, 2018

@cool88
cool88
on Jan 2, 2018

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

Timer commented on Jan 2, 2018

@Timer
Timer
on Jan 2, 2018 · edited by Timer
Contributor

@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.

facebook
locked as resolved and limited conversation to collaborators on Jan 2, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @subelsky@FDiskas@Timer@gaearon@taion

        Issue actions
          How to include bootstrap? · Issue #201 · facebook/create-react-app