5

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.

enter image description here

  • myWebsite folder with test.html

enter image description here

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. enter image description here

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.

enter image description here

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

  • try using `../js/bootstrap.min.js` `../` means you have to go one level up and find the js folder because the html is trying to find the bootstrap file in that folder – Max Dec 23 '15 at 23:55
  • Thanks for the quick reply. That is one way to solve it. I should mention that I changed my file structure a little bit so that instead of having my "myWebsite" folder inside my "Bootstrap" folder, I simply created a folder in "htdocs" called "myWebsite" and put "Bootstrap" inside of it. That also worked. –  Dec 24 '15 at 00:17

5 Answers5

4

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.

Tom Fuller
  • 5,291
  • 7
  • 33
  • 42
Joseph Evans
  • 1,360
  • 9
  • 14
2

All your 'src' locations need a leading slash to indicate that the path is relative from the root folder (and not the current directory).

So your bootstrap location is like this:

src="Bootstrap/js/bootstrap.min.js"

Without a leading / character, the browser will append the src location to the current href location. For example, if the requesting page was at:

http://example.com/mydir/test.html

Then the browser would look for the bootstrap url at:

http://example.com/mydir/Bootstrap/js/bootstrap.min.js <<< note mydir here!

In most cases, you want to reference files from the root directory so that they don't change when you navigate to a page in a different directory. Your src location would look like this:

src="/Bootstrap/js/bootstrap.min.js"

When you have a leading forward slash, the browser ignores the current directory and assumes that the url is referenced from the root folder of your website (ie http://example.com/). This would give an effective url for the browser to look up as follows:

http://example.com/Bootstrap/js/bootstrap.min.js

Which would be the correct one.

In summary, simply add '/' to all your paths and they will then be referenced from the root of your website and remain consistent whatever page/directory you happen to be on.

jsdeveloper
  • 3,945
  • 1
  • 15
  • 14
  • I think the best thing for someone starting out with pathing is to learn the relative paths and why it is important. They are also working locally in an xampp server and absolute paths might give them grief if they move the whole project folder or upload it to a server. – Joseph Evans Dec 24 '15 at 00:21
2
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
Simple Code
  • 9
  • 3
0

Just copy the original js and assets folder from the source code downloaded directory, and place them inside your directory where the index.html file resides. restart the webserver if necessary to reflect the changes. This worked for me :)

whosecode
  • 1
0

I had the same problem when using these lines

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

I have changed them to:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>

I got rid of that error now. I hope this is helping.

Vlad Marin
  • 1
  • 1