Basic information

What is react.js?

React.js is one of the popular javascript libraries used to create stateful and reusable UI components. It was developed on Facebook. It is an open-source JavaScript library.

What is Bootstrap?

Bootstrap is the most popular front-end development framework for building responsive web layouts with many components.

I do not recommend using bootstrap.because bootstrap increase HTML and CSS file size.

Two Way

1. Add Bootstrap in React Using NPM

use this command to install bootstrap in our project.

npm install bootstrap --save
copy success

After installing the bootstrap, you will need to import the CSS file in your React app entry file.

If you generated your project using the create-react-app tool, open the src folder find the entry file paste.

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

You can now use the CSS classes and utilities in your application, but if you need to use the JavaScript components.

You will also need to install the jquery and popper.js packages from npm. In your terminal, run the following commands:

npm install jquery popper.js
copy success

Next, go to the src/index.js file and add the following imports:

import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
copy success

2. Adding Bootstrap in React Using CDN

In this method, you are integrating Bootstrap with React, i.e., via a CDN. This approach is easy for everyone because you need only add a <link> tag for Bootstrap CDN.

Go to your project’s root folder, open the public/index.html file, and paste this code in the <head> section.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
copy success

If you need only Bootstrap components so in that case, you add JavaScript/jQuery in your React application.

Add the following CDN file before the closing tag:

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
copy success

demo for CDN

Conclusion

I hope you understand how to add bootstrap. But I recommend you to use react-bootstrap or reactstrap pre-built framework with react and bootstrap. Any queries and suggestions plz tell me in the comment box.

How to use bootstrap in react.js?