1. Introduction

Bootstrap is one of the most popular frontend toolkit for developing responsive, mobile-first front-end projects. In this tutorial, we’ll discuss two ways to install Bootstrap in a React project.

1. Using CDN
2. Install Bootstrap in your Node.js powered apps with the npm package.

2. Using CDN

In this way of installing Bootstrap, you just have to link css and js files in your React page. You can include the links in head section of your index.html page.

If you’re using Bootstrap’s compiled JavaScript and prefer to include Popper separately, add Popper before Bootstrap js, via a CDN preferably.

The latest CDN links while writing this tutorial can be founded at:

https://getbootstrap.com/docs/5.2/getting-started/download/

To check if your installation is correct, add a bootstrap button to your component. If the installation is correct, the difference is quite visible between a normal button and a bootstrap button.

function App() {
  return (
    <button type="button" class="btn btn-primary">
      Primary
    </button>
  );
}
export default App;

3. Install Bootstrap in React with npm

We’ll now discuss how to install Bootstrap in a React application with npm.

Step 1: In your project directory, run the following command in the terminal. For example, if your project directory is my-app, your current directory should be my-app while executing the command:

npm install bootstrap

The above command will install the latest version of Bootstrap. If you want to install a specific version of Bootstrap, you can provide the version after @ in the command.

npm install bootstrap@5.2.2

After the execution of the command, you can see the bootstrap directory in the node_modules directory. The dependency is also added in the dependencies object in package.json file:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.2.2",
    "jquery": "^3.6.1",
    "popper.js": "^1.16.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Step 2: Bootstrap is now successfully installed and you must now import it to use in your application. You can import it in your index.js file:

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

The above two statements are required to be imported inside your inside React file in order to use bootstrap classes in our React app components.

Step 3: To use Bootstrap’s JavaScript components in our react application, we have to install popper.js and jquery.

npm install jquery popper.js

After installing this similar to Bootstrap, you have to import these two dependencies in your React JS file in this case index.js.

import $ from 'jquery';
import Popper from 'popper.js';

After all these imports, the index.js looks like the following:

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/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 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. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

4. Conclusion

In this tutorial, we discussed two ways of installing Bootstrap in a React application. Bootstrap is very popular and commonly used frontend toolkit. That is why we thought of to discuss its usage with React.