How to fix Module not found: Can’t resolve bootstrap/dist/css/bootstrap.min.css

The error Module not found: Can’t resolve bootstrap/dist/css/bootstrap.min.css appears when your program is missing the bootstrap library, causing the module not to be found. This article will show you the solutions along with detailed code examples.

The reason for the error Module not found: Can’t resolve bootstrap/dist/css/bootstrap.min.css

The error Module not found: Can’t resolve bootstrap/dist/css/bootstrap.min.css will appear when you run the program if the IDE detects that you are missing the bootstrap library for React program. For example, in the code below, the program will report an error when you import the module to CSS elements.

Code:

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

function App() {
    return (
        <div>
            <h2 id="title" className="font-weight-bold text-success">
                LearnShareIT
            </h2>
            <button type="button" className="btn btn-success">Click me!!</button>
        </div>
    );
}

export default App;

Output:

This error may be because you need to install the bootstrap library or because there is a problem configuring your library. Follow the next part of the article to know the solutions for this error.

How to fix this error

Installing the bootstrap library

Bootstrap allows the website design process to be faster and more accessible based on essential elements such as typography, forms, buttons, tables, grids, navigation, image carousels…Bootstrap is a free collection of open-source code and tools to create a complete website template. You can install the bootstrap library using the below command.

npm install bootstrap

By running this command, npm will install the entire bootstrap package so you can import modules for your use, including “bootstrap/dist/css/bootstrap.min.css”. After running the install command, rerun the program, and we will get the screen rendered like the output below.

Output:

So the error Module not found: Can’t resolve bootstrap/dist/css/bootstrap.min.css has been handled. If still unsuccessful, you can refer to the following solution to fix it.

Checking the dependencies in the package.json file

This will work for you if, after installing the library with the command, you check the package.json file and see that it does not have the bootstrap dependencies. You can add it manually. Make sure the package.json file in your project looks like the one below.

Code:

"dependencies": {
   "react-bootstrap": "^2.7.0",
}

In this code, the version of the react-bootstrap library is 2.7.0, so it will show like the above. Depending on the version you install, ensure your dependencies have react-bootstrap and version parameters. Good luck with the solutions mentioned in the article.

Summary

In summary, the article has told you the solutions to fix the error Module not found: Can’t resolve bootstrap/dist/css/bootstrap.min.css, along with detailed examples. However, we should use the way of installing the bootstrap library to solve the problem most thoroughly.

Leave a Reply

Your email address will not be published. Required fields are marked *