Share with
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.
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
Here About Author
Pro Code Programming
Popular Post
Leave a reply
Sign in to stay updated on your professional world.
Pro Code Programming
Share and learn to code!
Programming articles, which helps you to build your application.
If something you are stuck to code and complete the program, just find here your quetion related articles.
New to Pro Code Programming?