Adding Bootstrap

While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. React Bootstrap is the most popular option that strives for complete parity with Bootstrap. reactstrap is also a good choice for projects looking for smaller builds at the expense of some features.

Each project's respective documentation site has detailed instructions for installing and using them. Both depend on the Bootstrap css file so install that as well:

npm install bootstrap

Alternatively you may use yarn:

yarn add bootstrap

Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your src/index.js file:

import 'bootstrap/dist/css/bootstrap.css';
// Put any other imports below so that CSS from your
// components takes precedence over default styles.

Using a Custom Theme

Note: this feature is available with react-scripts@2.0.0 and higher.

Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).

As of react-scripts@2.0.0 you can import .scss files. This makes it possible to use a package's built-in Sass variables for global style preferences.

To enable scss in Create React App you will need to install sass.

npm install sass

Alternatively you may use yarn:

yarn add sass

To customize Bootstrap, create a file called src/custom.scss (or similar) and import the Bootstrap source stylesheet. Add any overrides before the imported file(s). You can reference Bootstrap's documentation for the names of the available variables.

// Override default variables before the import
$body-bg: #000;

// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';

Note: You can prefix paths with ~, as displayed above, to resolve modules from node_modules.

Finally, import the newly created .scss file instead of the default Bootstrap .css in the beginning of your src/index.js file, for example:

import './custom.scss';