Adding bootstrap to React.js project

There are multiple ways to add bootstrap in react project.
Using bootstrap CDN
Installing bootstrap dependency
Using react bootstrap packages
This is the simplest way to add bootstrap. Like other CDN, we can add bootstrap CDN in index.html of the react project.
Below is one of the react CDN url
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
   integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
If we need the JavaScript components of bootstrap then we should add the jquery, popper.js in the index.html
With this the complete index.html will look like −
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no">
<linkrel="manifest"href="%PUBLIC_URL%/manifest.json">
<linkrel="shortcut icon"href="%PUBLIC_URL%/favicon.ico">
<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<title>React App hello</title>
</head>
<body>
<divid="root"></div>
<scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"
   integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
   </script>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
   integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous">
   </script>
<scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
   integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
   </script>
</body>
</html>
npm install bootstrap
npm install jquery popper.js
Now we can add these through import in index.js file of react project
import'bootstrap/dist/css/bootstrap.min.css';
import $ from'jquery';
importPopperfrom'popper.js';
import'bootstrap/dist/js/bootstrap.bundle.min';
importReactfrom'react';
importReactDOMfrom'react-dom';
import'./index.css';
importAppfrom'./App';
importregisterServiceWorkerfrom'./registerServiceWorker';
ReactDOM.render(<Dropdown/>,document.getElementById('root'));
registerServiceWorker();
There are two options to include react bootstrap packages
react-bootstrap
reactstrap
Install it with npm
npm install –save react-bootstrap
this package currently serves bootstrap 3 only and works is in progress for supporting the latest bootstrap.
Include it in App.jsx file
import'bootstrap/dist/css/bootstrap.css';
import'bootstrap/dist/css/bootstrap-theme.css';
Once installed we can directly use the bootstrap components in any components file.
import{SplitButton,MenuItem}from'react-bootstrap';
import React, { Component} from 'react';
import { Button } from 'react-bootstrap';
class HelloWorld extends Component {
   render() {
      return
      <div>
         <Button bsStyle="primary">Hello World Primary</Button>
         <Button bsStyle="success">Hello World Success</Button>
         <Button bsStyle="danger">Hello World Danger</Button>
      </div>
   }
}
export default HelloWorld;
npm install –save reactstrap
reactstrapsupporst the bootstrap 4 version that means it is more latest than react-bootstrap
As bootstrap is most popular css framework , using it with react we can create the mobile first web applications very quickly.
We can import the components from reactstrap which are similar to other react component
import {
   Button,UncontrolledAlert,Card,CardImg,CardBody,
   CardTitle,CardSubtitle,CardText
} from'reactstrap';
Reactstrap has good support for modal windows and it’s the preferred library for react.
There are other libraries as well such as CoreUI-React, react-UI, React-Bootstrap-Table