12

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.

Improve this question
2
  • 1
    Any console errors? Is the css file where you specified it? Commented Jan 28, 2014 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". Commented Jan 28, 2014 at 20:18

8 Answers 8

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

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.
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?
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: <script src="code.jquery.com/jquery-2.0.3.min.js"></script> This is for jQuery version 2.0.3
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.
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 :/
|
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.

Improve this answer

1 Comment

Could you elaborate on what browser you are using? Because I've never seen that happen before!
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';
Improve this answer

1 Comment

Thanks! This was exactly what i needed!! :)
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.

Improve this answer

1 Comment

.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 stackoverflow.com/a/21768051/494356.
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

Improve this answer

Comments

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

Improve this answer

Comments

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">
Improve this answer

Comments

0

I had the same issue it's because bootstrap example source code HTML refers to local files instead of cdn ones, I solved it by installing Bootstrap locally by using

npm i bootstrap

then using Ctrl + F to find all href and src links and change the initial directory from

../<their local file directory>

to

./node_modules/bootstrap/<their local file directory>

you won't find /assets in the installed bootstrap module, to solve this i installed the zip file "Download Examples" from their example page, it has a folder called "assets" which the directory the local file is looking for, I copy pasted it to the parent folder and changed the src links accordingly

Hope this helps!

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.