Summary

The webpage provides guidance on integrating Bootstrap with a React.js project using two methods: via NPM or through a CDN.

Abstract

The article "How to use Bootstrap in React.js" by Rajdeep Singh outlines two methods for incorporating Bootstrap into a React.js application. The first method involves using NPM to install Bootstrap and its dependencies, including bootstrap, jquery, and popper.js, and then importing the necessary CSS and JavaScript files into the React components. The second method is simpler, requiring the addition of Bootstrap's CDN link in the <head> section of the public/index.html file for the CSS, and optionally, the inclusion of CDN links for jQuery, Popper.js, and Bootstrap's JavaScript before the closing </body> tag if Bootstrap components are needed. The author notes that while Bootstrap is a popular front-end framework for responsive design, it may not be recommended due to its potential to increase file sizes. A demonstration using the CDN method is provided via an embedded codesandbox project.

Opinions

The author recommends against using Bootstrap due to its tendency to increase the size of HTML and CSS files, which could impact performance.
Bootstrap is acknowledged as a widely-used framework for developing responsive web layouts with a variety of components.
React.js is described as a popular JavaScript library for creating stateful and reusable UI components, originally developed by Facebook and available as an open-source tool.

How to use bootstrap in react.js?

In this article, I will help you use bootstrap in react.js. It is effortless to add bootstrap to your project. We start with basic Entro.

Basic Infomation:

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.

Note

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

Two Ways

Add Bootstrap in React Using NPM
Adding Bootstrap in React Using CDN:

1. Add Bootstrap in React Using NPM:

use this command to install bootstrap in our project

npm install bootstrap --save

after installing the bootstrap. You must import a CSS file into your React app entry.

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

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

You can now use the CSS classes and utilities in your application 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

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';

2. Adding Bootstrap in React Using CDN:

In this method, you are integrating Bootstrap into the React.JS project. You use a CDN link. This approach is straightforward 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 into 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">

If you need only Bootstrap components so in that case, you add JavaScript/jQuery to 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/[email protected]/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>

demo for CDN:

Conclusion

I hope you understand how to add bootstrap—any queries and suggestions. Plz, tell me in the comment box.