Bootstrap JavaScript is not loading, what is wrong with my code?

Question

<script src="C:\Users\Admin\Downloads\jquery-3.1.1.js"></script>
<script src="C:/Users/Admin/Downloads/bootstrap-4.0.0-alpha.4/dist/js/bootstrap.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="C:\Users\Admin\Downloads\bootstrap-4.0.0-alpha.4\dist\css\bootstrap.css">

I'm following a Youtube tutorial on Bootstrap, I have downloaded the Bootstrap files, the CSS is working, but I think the js file isn't linking.

Initially I didn't link the js file and thought that was the problem, but I've linked it and it still isn't working for me (the navbar doesn't load properly), the format comes out all funny.

Is there something wrong with how I'm linking the JS file?

don't use absolute paths. where is your project directory? you have just downloaded this things and now you want to use them. You don't include files like that man!!!!! — AlFra, Oct 11 '16 at 14:10
If in the youtube tutorial the dev used an absolute path, its time to choose another tutorial to watch. — Jefferson Ribeiro, Oct 11 '16 at 14:12
Hey, we all start somewhere. It's best you have the bootstrap files in the same folder as your HTML file, then use relative paths. eg href="/dist/css/bootstrap.css" — Brian, Oct 11 '16 at 14:15
post link of YT tutorial (under comments). I would like to see this wonder of tutorials. — AlFra, Oct 11 '16 at 14:17
well, you are giving away which OS you are using :) Then you are giving away where on disk you are keeping these files. And it is really a bad practice and it doesn't work as it should. As for relative paths... Google doesn't really like relative paths (when fetching content) but prefers absolute URLs like `` (SEO optimization stuff) — AlFra, Oct 11 '16 at 14:33
Read more about this [here](https://moz.com/blog/relative-vs-absolute-urls-whiteboard-friday) — AlFra, Oct 11 '16 at 14:41
I used a relative path, put my html, css and bootstrap files in a folder. The links in the header look like this and work. The problem is that I'm copying and pasting navbar code from the bootstrap website https://getbootstrap.com/components/#navbar-default and it's not coming out as it should. — dooogyyyu, Oct 11 '16 at 15:00

score 0 · Answer 1 · edited May 23 '17 at 12:00

Make sure the files are in correct path and The best practice is not to use absolute paths but this will give you a temporary solution to your problem

<script src="C:\Users\Admin\Downloads\jquery-3.1.1.js"></script>
    <script src="C:\Users\Admin\Downloads\bootstrap-4.0.0-alpha.4\dist\js\bootstrap.js" type="text/javascript"></script>


<link rel="stylesheet" type="text/css" href="C:\Users\Admin\Downloads\bootstrap-4.0.0-alpha.4\dist\css\bootstrap.css">

read more about absolute path and relative path here Difference between Relative path and absolute path in javascript

score 0 · Answer 2 · answered Oct 11 '16 at 14:21

Please don't use absolute path, use relative paths and forward slashes so that you have something like this.

<script src="../{relativepath}/jquery-3.1.1.js"></script>
<script src="../{relativepath}/bootstrap.js" type="text/javascript"></script>
<link rel="styleshee

Or you can move you bootstrap scripts to the same folder so that you have the structure like the one below.

+++projectfolder
+++++css
+++++js
++++++jquery-3.1.1.js
++++++bootstrap.js
+++++index.html

Then have your css and js ref to be like this show below:

<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<link rel="styleshee

Thanks bro, I'm using brackets and new to it. Currently struggling to link the files with that method. — dooogyyyu, Oct 11 '16 at 14:36

Brian · Answer 3 · 2016-10-11T14:35:29.453

This won't work in most cases. If you use absolute paths, you might encounter errors when files are moved outside the project folder, or permission issues on a production environment. Although in some cases, I have used absolute paths, like having a custom package use an email template saved in the file system.

But in your case, you might want to modify your file structure like so:

- Project
  - lib
    - bootstrap
      - dist (and contents)
  - index.html

Try having a file structure like this, and throw the dist folder from your bootstrap download into the lib folder. After that, you can include bootstrap like so:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="./lib/bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>


<link rel="stylesheet" type="text/css" href="./lib/bootstrap/dist/css/bootstrap.css">

Alternatively, you can use CDNs for some packages, but only if it's available. You also might want to look up package managers like bower and npm, makes developing applications much easier.

Bootstrap JavaScript is not loading, what is wrong with my code?

3 Answers3