How to use bootstrap in react.js?
This article, I will help you with how to use bootstrap in react.js.it very simple to add bootstrap in your project. we start with basic Intro.
2 min read
Table of contents
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.
1. Add Bootstrap in React Using NPM
use this command to install bootstrap in our project.
npm install bootstrap --savecopy 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 will also need to install the jquery and popper.js packages from npm. In your terminal, run the following commands:
npm install jquery popper.jscopy 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
<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
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://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>copy success
demo for CDN
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.