bootstrap not working, file not found

Question

I'm trying to use bootstrap framework in my website that I'm designing for a university assignment, and despite my best efforts bootstrap doesn't want to play nicely.

With the page open in Chrome, I can open the console and it's complaining it can't find the bootstrap file (see [img]). I have the html file in a folder called httpdocs, and folders called assets with a js, css, and img folder within the assets folder. The links are as follows:

<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css>" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>

I'm not exactly new to html/css/jquery and to my knowledge that path should link correctly, but for some reason it isn't. Any ideas?

[

<!-- start section body -->
    <div class="container>  
        <div class="row">
            <div class="span9">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
            </div>
        </div>
    </div> 

Just to cover all bases, is this how I should be marking it up? I have a sidebar on the left hand side of the page that spans 220px from the very left of the page, and I want the text in the paragraph to not be hidden by that sidebar. Taking that into consideration, how would I then also offset the div for the paragraph to be centered between the edge of the sidebar and the edge of the screen?

I see tutorials using the following instead. Is this an older version of bootstrap or am I trying to use the wrong thing?

<div class="col-lg-9 col-lg-offset-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Answer 1

I can see an extra > in the href attribute's value.

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

Not sure if this is a typo or this is how your actual code is.

You could also provide the links of the other two assets which were not found to confirm the issue.

Answer 2

It is possibly because the relative path is wrong. We could debug it if you tell us the project structure. Temporarily you could use bootstrap CDN

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

Answer 3

Alright, using bootstrap CDN does solve the issue, but the other solution is removing the trailing > in the file path.

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

corrected to

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

solved the issue

Answer 4

The file path urls in the ERR_FILE_NOT_FOUND errors inside your snapshots clearly indicate that you are directly accessing the web page in chrome and not through a web-server .

First I'd like to point out, that even though Chrome is able to open up a " local " file, there is a lot of things that tend to go haywire.

Next is, Frameworks like bootstrap are more than a normal HTML file, they are designed to be accessed through a web-server .

Lets say you finally are able to fix all the directory paths and links, so what? This "fixed" code is surely not gonna be able to run on a server anyways. So Before trying to "fix" something, I'll recommend that you first try accessing this site through a WAMP/LAMP stack on local environment.

Its pretty simple, If you are on linux then you can look up "installing LAMP". If you are on windows( which seems to be the case ), then I'd suggest this portable uWamp stack. You don't even need to install it or care about the servers like apache/mysql.

Just Unzip the archive to a directory, and copy your code to the www folder at the root. All you need to do is run the UwAmp.exe located in the root, and once the sign turns green, you can access the code through this link. http://localhost/

Answer 5

Make sure your are giving the path correct (always for any file). In your case there is and extra > at the end of the bootstrap css file path.

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

Change to

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