I'm having some issues regarging Bootstrap, I'm following a basic tutorial and all works however the CSS file is not loading properly. I've searched around on StackOverflow however none of it worked. My HTML file is in the exact same folder as the css folder is. This is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”></meta>
<title>This is a title, oh-ehm-GHEE</title>
<link rel=”stylesheet” href=”css/bootstrap.css” type=”text/css”/>
</head>
<body>
<div class="”container”">
<h1><a href="”#”">Bootstrap Site</a></h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<script src=".10.1.min.js"></script>
<script src=”js/bootstrap.js”></script>
</body>
</html>
I'm having some issues regarging Bootstrap, I'm following a basic tutorial and all works however the CSS file is not loading properly. I've searched around on StackOverflow however none of it worked. My HTML file is in the exact same folder as the css folder is. This is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”></meta>
<title>This is a title, oh-ehm-GHEE</title>
<link rel=”stylesheet” href=”css/bootstrap.css” type=”text/css”/>
</head>
<body>
<div class="”container”">
<h1><a href="”#”">Bootstrap Site</a></h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<script src="http://code.jquery./jquery-1.10.1.min.js"></script>
<script src=”js/bootstrap.js”></script>
</body>
</html>
- 1 what does your file/folder structure look like? Likely a path issue to your files – Jon Harding Commented Sep 18, 2013 at 20:04
-
Another thing is you're not closing your
containerdiv. Indenting properly makes it easier to see this. – KyleMit ♦ Commented Sep 18, 2013 at 20:13 - what is the network tab of the Chrome Inspector (or firebug) saying? Do you get a 404 on the css file? – Pevara Commented Sep 18, 2013 at 20:32
3 Answers
Reset to default 3It looks like fancy quotes snuck into your code, as seen on these two lines:
<div class="”container”">
<h1><a href="”#”">Bootstrap Site</a></h1>
Note the difference between the inner and outer quotes. The same quotes are in your meta tag, the link for the stylesheet, and your final script tag.
Replace the fancy quotes with standard quotes, and as long as your directory structure is right, it should work.
If your html is the same folder as you css? Then there is no css folder or your html is within the css folder am I right?
Try something like this
<link rel=”stylesheet” href=”bootstrap.css” type=”text/css”/>
Did you download the zip file from http://getbootstrap./? Typically the CSS, ICO and JS files are in "assets". So you need to upload those files and reference those files in your HTML. Make sure you have the files uploaded and are referencing correctly.
Also be sure you are referencing the CDN version of jQuery like so:
<script src="//code.jquery./jquery.js"></script>
Using the //code.jquery.... will ensure that your JS will always be up to date and if you ever use "https" on your website your JS files will be secured as well.
Hope that helps.