How to include bootstrap css and js in reactjs app?
Via npm, you would run the folowing
npm install bootstrap jquery --save
npm install css-loader style-loader --save-dev
If bootstrap 4, also add dependency popper.js
npm install popper.js --save
Add the following (as a new object) to your webpack config
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
Add the following to your index, or layout
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
If you are new to React and using create-react-app
cli setup, run the npm command below to include the latest version of bootstrap.
npm install --save bootstrap
or
npm install --save bootstrap@latest
Then add the following import statement to index.js
file. (https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css)
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
or
import 'bootstrap/dist/css/bootstrap.min.css';
don't forget to use className
as attribute on target elements (react uses className
as attribute instead of class
).
You can't use Bootstrap Jquery based Javascript components in React app, as anything that tries to manipulate DOM outside React is considered bad practice. Here you can read more info about it.
How to include Bootstrap in your React app:
1) Recommended. You can include raw CSS files of Bootstrap as the other answers specify.
2) Take a look at react-bootstrap library. It is exclusively written for React.
3) For Bootstrap 4 there is reactstrap
Bonus
These days I generally avoid Bootstrap libraries which provide ready to use components (above-mentioned react-bootstrap or reactstrap and so on). As you are becoming dependent on the props they take (you can't add custom behavior inside them) and you lose control over DOM that these components produce.
So either use only Bootstrap CSS or leave Bootstrap out. A general rule of thumb is: If are not sure whether you need it, you don't need it. I've seen a lot of applications which include Bootstrap, but using the only small amount of CSS of it and sometimes the most of this CSS is overridden by custom styles.