How to install Bootstrap in reactjs

Bootstrap is a very common requirement for any webpage design and app. You can add bootstrap in the react app by two ways. One by using CDN link and another by using installing bootstrap package for recatjs app. Both ways are shown in this tutorial.

Using bootstrap in reactjs by using CDN link

Open index.html file from public folder of react app and add the following line in the head section.

<link rel="stylesheet" href=https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css integrity="sha384-gOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

Now, you can bootstrap classes in the react component to render the page using bootstrap.

Using bootstrap in reactjs by installing bootstrap

If you don’t like to use CDN link then you can install bootstrap package by using npm. Run the following command to install bootstrap in react app.

$ npm install react-bootstrap bootstrap

Now, add the following line in react app file to use bootstrap classes.

import 'bootstrap/dist/css/bootstrap.min.css';

Using bootstrap in react app

Create a js file with the following code to see the use of bootstrap in reactjs. The following code divide the content in two equal parts. Check the output from the browser.

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
class App extends Component {
render() {
return (
<div>
<br/>
<div className="row">
<div className="col-md-6" style={{float:"left"}}>
Left content
</div>
<div className="col-md-6" style={{float:"right"}}>
Right content
</div>
</div>
</div>
);
}
}
export default App;

After completing the steps, you are able to use any bootstrap class in the react app and make responsive react app.