How to install Bootstrap and Jquery in React JS

We are seen how we can implement bootstrap in react app to use bootstrap classes. And also, we have seen how we can install jQuery within react application.

Bootstrap in React JS

Bootstrap is used to design websites more beautiful. It is responsive framework for HTML and CSS. Bootstrap having HTML CSS responsive templates to design more attractive website. It is very faster and easier framework to design websites.

Prerequisite

Install Node.JS
Install React.JS

Setup

To Install bootstrap there is two methods available.

Install bootstrap using node package manager (NPM).
Install bootstrap using content delivery network (CDN).

Method 1

Install bootstrap using node package manager (NPM).

The command is used to install bootstrap using npm in react app is

npm install bootstrap jquery popper.js --save

Jquery is used to handle the jquery. And some time we need popper.js for handling bootstrap.

If you want to install the version of bootstrap use this command

npm install bootstrap@4.3.3 --save

In the above command the version is mentioned after the @ sign which indicates to node package manager install bootstrap of version 4.3.3

Method 2

Install bootstrap using content delivery network (CDN)

To download CDN go to main bootstrap site. Click here to go official website.

Apply Bootstrap to Project

Method 1

After installation done using npm. Then after add the bootstrapp min css and js, also jquery and popper.js this external installed moduled is register in index.js file which is available in react app.

// src > index.js

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import $ from 'jquery';
import Popper from 'popper.js';

Now we can use bootstrap, jquery in react app.

To check bootstrap in working or not

check bootstrap class and add to your html classes

Example

// src > app.js

import React from 'react';

function App() {
  return (
    <div className="jumbotron">
        Hiii you have successfully installed bootstrap
    </div>
  );
}

export default App;

Run App using npm start and see output.

Method 2

This CDN link is used as online if internet connection is down then its not working.

Using CDN bootstrap 4 link add this link to index.html file in react app

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

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

  <title>React App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>
</html>

Now we can use bootstrap in react app.

To check bootstrap in working or not

check bootstrap class and add to your html classes.

Example

// src > app.js

import React from 'react';

function App() {
  return (
    <div className="jumbotron">
        Hiii you have successfully installed bootstrap
    </div>
  );
}

export default App;

Run App using npm start and see output.

Related Post

How to install bootstrap 4 in angular

How to route pages using react router in react js framework.

How to install Bootstrap and Jquery in React JS

We are seen how we can implement bootstrap in react app to use bootstrap classes. And also, we have seen how we can install jQuery within react application.

Bootstrap in React JS

Prerequisite

Setup

Method 1

Method 2

Apply Bootstrap to Project

Method 1

Method 2

0 Comments

Hit Like

Here About Author

Bhushan Zade

FILE DRAG AND DROP IN ANGULAR 10

How to compress or crop image using ngx-image-cropper module in Angular app

Add multiple location markers into google map using AGM into angular app

Manual Connect MySQL Database Server With Java Spring Boot Application

Add auto search google map places or location search bar into angular app

How to install Bootstrap and Jquery in React JS

Compress or reduce size of image using Django rest framework

Angular make confirm dialog box using Ng-Bootstrap model popup package.