Bootstrap Glyphicons won't show unless all the files are in the root

Question

With the following linkage to CSS/ JS, I'm able to successfully pick every CSS except the Glyphicons.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="../bootstrap-3.3.5-dist/bootstrap.min.js"></script>

The project folder structure:

-- bootstrap-3.3.5-dist
-- myProjectFolder -- index.html
                   -- aboutUs.html
                   -- ...html
                   -- ...html

What I want >>>:

What I get instead:

It, however, all works perfectly after moving the HTML file to the the root, so that I have the HTML and bootstrap on the project root. The linkage changes to:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href=".bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

The project folder structure now changes to:

-- bootstrap-3.3.5-dist
-- index.html
-- aboutUs.html
-- ...html
-- ...html

Why is this so, and is there a way to make it all work without moving the HTML file to the root?

You have to reference the bootstrap files *relative to* the index file. So if you have `bootstrap-3.3.5-dist` at project root, and your index is `/html/index.html`, in your index, you would have to have `... href="../bootstrap-3.3.5-dist/..." ...` — Aeolingamenfel, Nov 13 '15 at 18:56
Sorry. I made that error while making an extract from the project to the question. The linkage is, however supposed to be `../../` in the project, but in the question, you are right, `../` — Program-Me-Rev, Nov 13 '15 at 19:00
I don't see your folder for the glyphcon font in your structure, is that normal ? — Blag, Nov 13 '15 at 19:11
may be this is what you are looking for. hope this will help. :) see the accepted answer here http://stackoverflow.com/questions/19608873/how-to-include-glyphicons-in-bootstrap-3 — aimme, Nov 13 '15 at 19:17

score 1 · Accepted Answer · answered Nov 13 '15 at 19:40

The root path is the top path of your website. It doesn't have a parent folder. You can go to / or /index.hmtl, but, /../foo.

The document root maps the root path of your website to a directory of your filesystem. On your filesystem the document root probably isn't the filesystem root and does have a parent directory.

However as far as the website goes, there is nothing above the root. So directories that aren't under the document root are simply outside of the scope of the website.

Bootstrap Glyphicons won't show unless all the files are in the root

1 Answers1