Solution

To check whether bootstrap is installed or not in react js, we have to check how many ways have to install bootstrap in react.

we are going to check all the below ways of installation.

  1. Using NPM or yarn
  2. Using CDN Link

So one by one, we will go will the following ways and check their installation steps after how to identify if it’s installed and then how to uninstall it.

Using NPM or yarn

Most of the time, developers use NPM to install bootstrap in their projects and it is the best way to install and uninstall bootstrap.

Installation

To install bootstrap using npm or yarn use the below commands in your project directory.

  • For NPM Developers
npm install react-bootstrap bootstrap
  • For Yarn Developers
yarn add react-bootstrap bootstrap

Identification

To identify whether bootstrap is installed using NPM or not, Go TO the package.json file and search bootstrap if you get anywhere in your package dependencies it means bootstrap is installed in the project.

package.json

{
  "name": "code-sandbox-examples",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.6.0",  // bootstrap installed
    "react": "^17.0.2",
    "react-bootstrap": "^1.5.2", // bootstrap installed
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Uninstallation

To uninstall bootstrap using npm or yarn use the following commands.

  • For NPM Developers
npm uninstall react-bootstrap bootstrap
  • For Yarn Developers
yarn remove react-bootstrap bootstrap

Sometimes developers use the CDN link in react HTML file to install it, but I will not recommend this way.

Installation

To install bootstrap using the CDN link add the following code in your index.html file located in the public folder.

<!-- Including the bootstrap css via CDN -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

Identification

To identify whether bootstrap is installed using CDN or not, go to your public/index.html file and search for bootstrap and if you get any link tag with bootstrap it means bootstrap installed in your project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Including the bootstrap css via CDN -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <title>React-Bootstrap CodeSandbox Starter</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Uninstallation

To uninstall bootstrap using the CDN link just remove the bootstrap link tag from your index.html file it will remove it from your project.