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?
This question is related to
twitter-bootstrap
reactjs
webpack
After installing bootstrap in your project "npm install --save [email protected]" you have to move to the index.js file in the project SRC folder and import bootstrap from node module package.
import 'bootstrap/dist/css/bootstrap.min.css';
If you like you can get help from this video, sure it will help you a lot.
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.
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
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.
I try with instruction:
npm install bootstrap
npm install jquery popper.js
then in src/index.js:
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<Dropdown />, document.getElementById('root'));
registerServiceWorker();
Full answer to give you jquery and bootstrap since jquery is a requirement for bootstrap.js:
Install jquery and bootstrap into node_modules:
npm install bootstrap
npm install jquery
Import in your components using this exact filepath:
import 'jquery/src/jquery'; //for bootstrap.min.js
//bootstrap-theme file for bootstrap 3 only
import 'bootstrap/dist/css/bootstrap-theme.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
Somehow the accepted answer is only talking about including css file from bootstrap.
But I think this question is related to the one here - Bootstrap Dropdown not working in React
There are couple of answers that can help -
I just want to add that installing and importing bootstrap in your index.js file won't be enough for using bootstrap components. Every time you want to use a component you should import it, like: I need to use a container and a row
<Container>
<Row>
<Col sm={4}> Test </Col>
<Col sm={8}> Test </Col>
</Row>
</Container>
You should import in your js file
import {Container, Row, Col} from 'react-bootstrap';
I too had a similar scenario. My setup was as indicated below
npm install create-react-app
This will provide you with a boiler-plate code setup to begin. Play around with the App.js file for the main logic.
Later you can use bootstrap CDN in index.html created by the CLI tool. or
npm install bootstrap popper jquery
and then simply include this in the App.js file.
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle'
Few authors have mentioned using className attribute instead of class, but in my case, both were working like below. But if you use class and look at console in developer tools on browser, you will see error for using class.So use className instead.
<div className="App" class = "container"> //dont use class attribute
And don't forget to remove the default CSS imports to avoid conflicts with bootstrap.
Hope that helps, Happy coding!!!
Since Bootstrap/Reactstrap has released their latest version i.e. Bootstrap 4 you can use this by following these steps
I assume npm is already installed and then type the following command
npm install --save reactstrap react react-dom
This will install Reactstrap as a dependency in your project.
Here is the code for a button created using Reactstrap
import React from 'react';_x000D_
import { Button } from 'reactstrap';_x000D_
_x000D_
export default (props) => {_x000D_
return (_x000D_
<Button color="danger">Danger!</Button>_x000D_
);_x000D_
};
_x000D_
You can check the Reactstrap by visiting their offical page
Just in case if you can use yarn
which is recommended for React apps,
you can do,
yarn add [email protected] // this is to add bootstrap with a specific version
This will add the bootstrap as a dependency to your package.json
as well.
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "4.1.1", // it will add an entry here
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "1.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
After that just import bootstrap
in your index.js
file.
import 'bootstrap/dist/css/bootstrap.css';
Please follow below link to use bootstrap with React. https://react-bootstrap.github.io/
For installation :
$ npm install --save react react-dom
$ npm install --save react-bootstrap
------------------------------------OR-------------------------------------
Put Bootstrap CDN for CSS in tag of index.html file in react and Bootstrap CDN for Js in tag of index.html file. Use className instead of class follow below index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="../src/images/dropbox_logo.svg">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="root"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
You can just import
the css file wherever you want. Webpack will take care to bundle the css if you configured the loader as required.
Something like,
import 'bootstrap/dist/css/bootstrap.css';
And the webpack config like,
loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }]
Note: You have to add font loaders as well, else you would be getting error.
Hope this is helpful ;)
Step 1: using NPM install this bellow command
npm install --save reactstrap@next react react-dom
Step 2: example index.js main script import bellow command
import 'bootstrap/dist/css/bootstrap.min.css';
Step 3: UI components refer bellow website reactstrap.github.io
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';
Simple Solution (2020) is as follows :-
npm install --save jquery popper.js
npm install --save bootstrap
npm install --save style-loader css-loader
import "bootstrap/dist/css/bootstrap.min.css";
import $ from "jquery";
import Popper from "popper.js";
import "bootstrap/dist/js/bootstrap.bundle.min";
If you use CRA(create-react-app) in your project, you can add this:
npm install react-bootstrap bootstrap
If you use bootstrap in your app and if it's not working, then use this in index.html :
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
I did the above to solve similar problem. Hopefully this is useful to you :-)
you can install it dirctly via
$ npm install --save react react-dom
$ npm install --save react-bootstrap
then import what you really need from the bootstrap like :
import Button from 'react-bootstrap/lib/Button';
// or
import Button from 'react-bootstrap';
and also you can install :
npm install --save reactstrap@next react react-dom
check this out click here .
and for the CSS you can read this link also carfuly
npm install --save bootstrap
and add this import statement into your index.js file
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
or You could simply add CDN in your index.html file.
Here is how to include latest bootstrap
https://react-bootstrap.github.io/getting-started/introduction
1.Install
npm install react-bootstrap bootstrap
then import to App.js import 'bootstrap/dist/css/bootstrap.min.css';
Then you need to import the components that you use at your app, example If you use navbar, nav, button, form, formcontrol then import all of these like below:
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import Form from 'react-bootstrap/Form'
import FormControl from 'react-bootstrap/FormControl'
import Button from 'react-bootstrap/Button'
// or less ideally
import { Button } from 'react-bootstrap';
Source: Stackoverflow.com