404 error for bootstrap.min.css and bootstrap.min.js

I’m building a website and trying to use Bootstrap, however I’m unable to successfully call bootstrap.min.css and bootstrap.min.js.

I have Bootstrap unzipped in a new folder titled “Bootstrap” in my htdocs folder. In my Bootstrap folder I created a new folder to house my code for my website since this, in terms of organization, would be a lot easier. I also specified in my .html file to look for “bootstrap.min.css” and “bootstrap.min.js” in the following filepath in htdocs:

Folder Structure:

Bootsrtap folder with css, fonts, js, myWebsite subfolders, and test.html.

myWebsite folder with test.html

HTML (this is the test.html file in my “myWebsite” folder):

<!-- Bootstrap -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">

and

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="Bootstrap/js/bootstrap.min.js"></script>

I tried running the example code off of Bootstrap’s website and am getting a 404 Error for both of those files.

Since creating a new folder and then specifying the href wasn’t working, I tried putting the sample code from Bootstrap’s website directly into my “Bootstrap” folder and when I do this it works perfectly.

HTML (this is the test.html from the “Bootstrap” folder):

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

and

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

I think there is something with the filepath I specified but I’ve been unable to get it to work after working on it for the first half of the day. What I’d really to know is how do I correctly call the “bootstrap.min.css” and “bootstrap.min.js” files while still maintaining my current folder structure? Any help/advice will be greatly appreciated.

Thanks

Answer

The paths for files are relative to your html file. For your test.html located in the Bootstrap directory you can access them by pointing at css/bootstrap.min.js and js/bootstrap.min.js. For your test.html located in the Bootstrap/myWebsite directory you can access them by pointing at ../css/bootstrap.min.js and ../js/bootstrap.min.js. The "../" will traverse up one directory into the parent of the current directory.

Advertisement

Answer