Adding Bootstrap
You don’t have to use reactstrap together with React but it is a popular library for integrating Bootstrap with React apps. If you need it, you can integrate it with Create React App by following these steps:
Install reactstrap and Bootstrap from npm. reactstrap does not include Bootstrap CSS so this needs to be installed as well:
npm install --save reactstrap bootstrap@4
Alternatively you may use yarn
:
yarn add bootstrap@4 reactstrap
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.
Import required reactstrap components within src/App.js
file or your custom component files:
import { Button } from 'reactstrap';
Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render method. Here is an example App.js
redone using reactstrap.
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 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 must prefix imports from
node_modules
with~
as displayed above.
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';