How to install bootstrap in React.js ?
Bootstrap is one of the most popular front-end open-source toolkit for developing responsive, mobile-first front-end projects on the web. It contains various types of design templates based on CSS and JavaScript. It has various prebuilt components such as Accordion, Alerts, Carousel, Button, Card, Breadcrumb, etc. Instead of writing code from scratch, one can use bootstrap templates to make the work a lot easier. There are multiple ways to use Bootstrap in your local project such as by using Bootstrap CDN or installing 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).
After installing one can use Bootstrap by simply importing the bootstrap dependency in your React JS file. After importing Bootstrap minified CSS as the dependency we can use built-in bootstrap classes in our React App Components. But in order to use Bootstrap’s JavaScript components in our React App we have to install jquery and popper.js similarly using npm install.
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.
cd gfg
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.
Project_Structure
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 bootstrap@4.1 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.
Bootstrap folder inside node_modules
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”.
package.json
Bootstrap inside dependencies after installation
Step 4: As of now bootstrap is successfully installed in React app but to use it we must import it inside React file. I am importing Bootstrap minified CSS file and Bootstrap JavaScript minified bundle file inside index.js which is in F:\gfg\src.
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.
Filename: index.js
Javascript
import 'bootstrap/dist/css/bootstrap.min.css';import 'bootstrap/dist/js/bootstrap.bundle.min';import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root')); |
Explanation: The above code would probably look like index.js except line 1 and 2 they bootstrap is not imported as dependencies inside index.js by default on creating React App. In line 1 and 2 we have imported bootstrap minified css and bootstrap javascript minified bundle. Now we can use bootstrap classes inside our React app components.
Step 5: We are all set to use built-in Bootstrap classes but to use Bootstrap’s JavaScript components in our react app we have to install popper.js and jquery. In case they are not installed already. To install both jquery and popper.js write the following line in terminal and hit enter.
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
Filename: index.js
Javascript
import 'bootstrap/dist/css/bootstrap.min.css';import 'bootstrap/dist/js/bootstrap.bundle.min';import $ from 'jquery';import Popper from 'popper.js';import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'));// If you want to start measuring performance// in your app, pass a function to log results// (for example: reportWebVitals(console.log))// or send to an analytics endpoint.reportWebVitals(); |
Step 6: Let’s use simple bootstrap button in our React App. For that we have to import bootstrap minified css and bootstrap javascript minified bundle as a dependency in our index.js file. And add a button in our default index.js file. As we did already. After that, we have to add a button inside our App to that add the following code inside App.js.
Filename: App.js
Javascript
import logo from './logo.svg';import './App.css';function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" target="_blank" rel="noopener noreferrer" > Learn React </a> <a className="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Bootstrap button </a> </header> </div> );}export default App; |
Step to run the application: Save your file and run npm server by entering following command in the terminal.
npm start
Output: After running the server, your output would look like this
OUTPUT
Please Login to comment...