React can't resolve bootstrap

Question

While following a tutorial, I began the frontend of this React project by running the following command:

npx create-react-app frontend

The instructor of this tutorial specified that he was using bootstrap, but did not indicate where he installed it.

So when I got to the Index.js portion, I see where he required it:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "boostrap/dist/css/bootstrap.min.css";

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

reportWebVitals();

Knowing that nowhere did the instructor explained where or when he installed bootstrap, I attempted to install it myself from within the frontend folder like this:

npm install react-bootstrap bootstrap

I can see the bootstrap folder inside the node_modules folder.

So when I run npm-start, I get the following error message:

Module not found: Error: Can't resolve 'boostrap/dist/css/bootstrap.min.css' in '/Users/jaybee/Desktop/Files/Main/2024/Projects/web/react/registration/frontend/src'
ERROR in ./src/index.js 9:0-45
Module not found: Error: Can't resolve 'boostrap/dist/css/bootstrap.min.css' in '/Users/jaybee/Desktop/Files/Main/2024/Projects/web/react/registration/frontend/src'

What did I do wrong and how do I fix it?

Answer 1

You forgot 't' in 'bootstrap'

here :

import "bootstrap/dist/css/bootstrap.min.css";