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.
What is react.js?
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
- 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.
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';
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">
Add the following CDN file before the closing </body> 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://email@example.com/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:
I hope you understand how to add bootstrap—any queries and suggestions. Plz, tell me in the comment box.