Menu
Adding Bootstrap in React Using CDN: You use a CDN link. This approach is easy for everyone because you need only add a <link> tag for Bootstrap CDN. Go to your project's root folder, open the public/index. html file, and paste this code in the <head> section.
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).
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';
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.
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.
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!!!
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With