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

Question

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 1

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.