In create-react-app, adding Bootstrap 4?

When using create-react-app, you don't need to eject or edit webpack config for using react-bootstrap.

Install react-bootstrap

npm install --save react-bootstrap bootstrap@3

You have to import css separately by adding this to the top of your src/index.js

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

Check out the documentation for using react-bootstrap.

Most dependencies can be added without changing webpack config. You can add packages and start using them.

If you're really concerned about the possibility of changing webpack config, I'd urge you to checkout roadhog. It's a configurable alternative of create-react-app


It's easier now with the latest version of bootstrap: https://getbootstrap.com/docs/4.1/getting-started/webpack/

Install bootstrap and dependencies:

npm install bootstrap jquery popper.js --save

Then in your app entry point (index.js) import bootstrap and the css:

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

Good to go!

EDIT

There's now a section in the create-react-app documentation: https://facebook.github.io/create-react-app/docs/adding-bootstrap#docsNav

They mention react-bootstrap and reactstrap if you'd rather use that, and you will not need to eject.