Share and Learn To Write Code!

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 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.
reactjs   bootstrap   javascript   jquery   react bootstrap 4  

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

  1. Install Node.JS, click here.
  2. Install React.JS, click here.


Setup

To Install bootstrap their is two methods available.

  1. Install bootstrap using node package manager (NPM).
  2. 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


0replies
Leave a reply
49
Registerd Users
92
Total Subscribers
59
Total Articles
60898
Total Views