I am newb to reactjs, I want to include bootstrap in my react app
I have installed bootstrap by npm install bootstrap --save
Now, want to load bootstrap css and js in my react app.
I am using webpack.
webpack.config.js
var config = {
entry: './src/index',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 8080,
historyApiFallback: true,
contentBase:'./src'
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
module.exports = config;
My issue is "how to include bootstrap css and js in reactjs app from node_modules?" How to setup for bootstrap to include in my react app?
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
).