11

I've been experimenting with Twitter Bootstrap and have run into a problem I cannot resolve. Basically, I have a very simple HTML file (based on the beginning of this tutorial: http://www.sitepoint.com/understanding-twitter-bootstrap-3/ ) and I can open the file, but it is not loading the CSS.

I've tried this locally as well as from my web server and in both instances, the CSS does not load. This tutorial has some errors on where quotes go which I've fixed, but I've had the same problems with another tutorial.

index.html is located in the same folder as the CSS folder.

Here is my HTML:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>

<body>
<h1>Hello, world!</h1>

<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Please for the love of God help me before I destroy my Macbook.

user3246092
  • 880
  • 2
  • 13
  • 28
  • 1
    Any console errors? Is the css file where you specified it? – patricksweeney Jan 28 '14 at 20:09
  • 1
    As patrick suggested, check your browsers console window, if it cannot load the .css file, it should output where it's trying to look. However, you did mention the .css file is in the same folder as `index.html` - did you try changing your href to `href="bootstrap.min.css"`. – X3074861X Jan 28 '14 at 20:18

7 Answers7

8

Try using bootstrap.css instead of bootstrap.min.css. Also, make sure that it's in the correct path.

Another thing you can try as well is using media="all" instead of media="screen" in your link specifications.

Your javascript link tag for jQuery looks suspicious. Either give a relative path on your local directory, or the absolute path to an external url.

reectrix
  • 7,999
  • 20
  • 53
  • 81
  • You can reference a script that way as it can generally cope with different protocols better (meaning http versus https) - I would definitely agree that a beginner should be giving it a relative path / absolute link, though. – patricksweeney Jan 28 '14 at 20:28
  • Firebug is reporting: "Bootstrap requires JQuery" which I've never used. I'm assuming the tutorial author put in a link that doesn't work and that may be the issue. I'm looking into the CDN and am somewhat confused. Is there a universal link people can use to connect to jQuery? – user3246092 Jan 28 '14 at 20:44
  • Yes, there's several places you can get it from (Microsoft, Google, and several others host their own) and the jQuery foundation has one as well, try this: This is for jQuery version 2.0.3 – reectrix Jan 28 '14 at 20:47
  • You can also download your own copy and keep it with the application. As long as you give it the right path locally, the browser should be able to find it when the page loads. Normally, it doesn't matter if you give the absolute link, or if you just download it and link it locally. If you know that your application won't have access to the internet when it's running, it's best to download it yourself and access it that way. – reectrix Jan 28 '14 at 20:49
  • I changed the script src tag, but have noticed the error is relating to line 7 of bootstrap.js (and bootstrap.min.js since I've interchanged them for testing purposes). If this a problem with Bootstrap itself? Or do you think I need to adjust something? This is the line: if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery") } I'm not sure if this even related to the CSS not working, but I'd imagine an error in the HTML could botch the whole thing – user3246092 Jan 28 '14 at 20:53
  • Is jquery getting included BEFORE bootstrap.js? It needs to be before it Bootstrap's js file. I see in your code above it at least WAS getting called first, but I don't know if you moved it around. – patricksweeney Jan 28 '14 at 21:04
  • I moved it as instructed. Same line 7 error is coming up from bootstrap.js via Firebug. Again, I'm not sure if this error is also affecting the CSS or not. I deeply appreciate everyone's efforts. I'm starting to think I should just use another tutorial. My index.html is in the same folder as the CSS, JS and Fonts folders. I believe the css and js paths in the HTML are consistent with that. To be clear, here's my current HTML is anyone sees an issue. – user3246092 Jan 28 '14 at 21:25
  • Bootstrap 101 Template Hello, world! – user3246092 Jan 28 '14 at 21:26
  • Hmm that is strange. Have you tried using a different browser, like Chrome? I set up Bootstrap with Safari and didn't have any issues with it, and I think all the ones you have might be related to file paths. It might give you a clue as to what other possible errors there might be. – reectrix Jan 29 '14 at 00:08
  • 1
    Argh, ok apparently for some reason, it will not work with the CSS file stored locally. I'm linking to a URL which seems to be working. I don't know if this problem is unique to me or not, but it seems the CSS file needs to be hosted on the internet in my case. Thank you everyone for your guidance! Sadly, it was just something stupid :/ – user3246092 Jan 29 '14 at 18:40
5

I had the same problem but it was unique, not sure if other had the same issue. I had "rel=" before the "href=". Just swapping the places, i.e. "href=" before "rel=" resolved the issue. Thanks a ton for the correct syntax.

Prashant Shende
  • 51
  • 1
  • 1
2

I followed below steps to load or apply Boostrap css.

first check bootstrap available in node_modules?

If you don't see, Install bootstrap with below command

npm i bootstrap

After installation successful, verfiy again boostrap in node_modules. enter image description here

next open your project styles.css file and import below line.

@import '~bootstrap/dist/css/bootstrap.css';
Shakeer Hussain
  • 2,230
  • 7
  • 29
  • 52
1

when you upload the bootstrap files to your hosting, make sure to upload ALL the files even the .map files. I did that and it worked for me.

gogev
  • 11
  • 1
  • 1
    .map files are used by browsers to help debug minified files. They map the minified version to the full version so that you can see what's actually happening. This shouldn't make a difference to the output. See http://stackoverflow.com/a/21768051/494356. – Khalos Jul 04 '15 at 16:36
1

I had the same problem and I solved it.

open your file in windows notepad, choose save_as > Beside the Save button , open Encoding dropdown and choose UTF-8 !

my file was saved in Unicode Encoding. I used windows notepad to save-as my file in a UTF-8 Encoding and the issue was gone.

you may also use notepad++ to change the encoding of a file. good luck

macromediax
  • 11
  • 3
0

I found this answer because it was the top google search yet I had this problem for a completely different reason.

For those who might have made the same mistake I have, remember to add

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

or some reference to another version of bootstrap so that your code knows where to get all the bootstrap related information

jacob
  • 398
  • 4
  • 13
0

Sounds like this is just a simple directory issue. You are saying you have the HTML file and the CSS file in the same folder right? Then to load the file link it like this:

<link href="bootstrap.min.css" rel="stylesheet" media="all">

Else If your css file is in a "css" folder then change the directory to:

<link href="css/bootstrap.min.css" rel="stylesheet" media="all">

If worse comes to worse use the external link instead for troubleshooting:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
Kyle Berkland
  • 1
  • 1