How to install Bootstrap and Jquery in React JS.

We are seen how we can implement bootstrap in react app to use bootstrap classses. And also we seen how we can install jquery within our react app.

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, click here.
Install React.JS, click here.

Setup

To Install bootstrap their 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 ur 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.

How to install bootstrap 4 in angular 9 | 8 | 7 | 6 | 5 | 4

React Bootstrap Demo for developing responsive web app

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

Install Node JS in windows machine and set environment path in settings.

How to start with javascript framework i.e. React JS web framework in windows operating system

Hit Like

Hit like for this post

Here About Author

Pro Code Programming

Programming articles, which help you to build your application. If something you are stuck to code and complete the program, just find here your question-related articles.

Share and Learn To Write Code!

How to install Bootstrap and Jquery in React JS.

We are seen how we can implement bootstrap in react app to use bootstrap classses. And also we seen how we can install jquery within our react app.

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

Setup

To Install bootstrap their is two methods available.

Method 1

Install bootstrap using node package manager (NPM).

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

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

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.

Now we can use bootstrap, jquery in react app.

To check bootstrap in working or not

check bootstrap class and add to ur html classes

Example

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

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

Run App using npm start and see output.

Related Post

How to install bootstrap 4 in angular 9 | 8 | 7 | 6 | 5 | 4

React Bootstrap Demo for developing responsive web app

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

Install Node JS in windows machine and set environment path in settings.

How to start with javascript framework i.e. React JS web framework in windows operating system

Hit Like

Here About Author

Pro Code Programming

Popular Post

Design custom bootstrap 4 pagination for angular project instead of using 3rd party pagination

Add google maps with add marker getting current location using @agm/core module in angular framework

How to install bootstrap 4 in angular 9 | 8 | 7 | 6 | 5 | 4

Create JWT token sign in or login API into Django Python Rest Framework

Open model popup in Angular 6 | 7 | 8 | 9 using @ng-bootstrap NgbModal

Newsletter / Subscribers

Never miss post. You can subscribe to stay tuned with new updates.

Never miss post.
You can subscribe to stay tuned with new updates.