How to install bootstrap in React.js ?
However, using Bootstrap CDN is an easier way to add Bootstrap to the project. There is no need to install or download any package. One can add simply by putting a <link> into the <head> section of the file or react app. But today we are going to discuss how one can install Bootstrap in React JS.
Following are some steps to install Bootstrap:-
- Create React App
- Open terminal and change directory to the path of your current project
- Run npm (node package manager) install command followed by the name of package and version(optional).
Creating react application:
Step 1: Create a React App using the following command. Write the following command inside terminal and hit enter. (Instead of gfg you can use foldername of your choice. )
npx create-react-app gfg
Step 2: Change directory to the project folder by entering the following command.
Project Structure: Now we are in our project directory. As we created the ReactJS successfully so let’s install the required package. After creating React app our project structure would look similar to the following.
Step 3: Run the following command in the terminal. Do check whether you are in React App directory or not. For the sake of convenience I have taken F:\gfg as my current working directory, the directory of my React App(gfg).
npm install bootstrap
If you observe in the above command I have not mentioned the version of bootstrap. By default, it will install the latest version of bootstrap. But if you are following some tutorials, courses or wanted to build your React JS app in a particular bootstrap version, you can do so by passing ‘@version’ just after bootstrap that is npm install firstname.lastname@example.org where 4.1 is name of version.
Our current working directory is F:/gfg. Bootstrap is now successfully installed you can verify by searching the bootstrap folder inside node_modules folder.
You can also observe some changes in your package.json file is after installing bootstrap an entry is added inside the dependencies part of package.json similar to “bootstrap”: “version”.
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.bundle.min';
The above to two statements are required in our index.js to import dependencies inside React file in order to use bootstrap classes in our React app components.
npm install jquery popper.js
After installing this similarly import these two dependencies in your React JS file in this case index.js Following are the statements to import these two dependencies.
import $ from 'jquery'; import Popper from 'popper.js';
After making all these additional changes your index.js file should look like the following
Step to run the application: Save your file and run npm server by entering following command in the terminal.
Output: After running the server, your output would look like this