Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap CSS not loading

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.

like image 906
user3246092 Avatar asked Jan 28 '14 20:01

user3246092


5 Answers

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.

like image 78
reectrix Avatar answered Oct 06 '22 04:10

reectrix


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.

like image 28
Prashant Shende Avatar answered Oct 06 '22 04:10

Prashant Shende


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';
like image 29
Shakeer Hussain Avatar answered Oct 06 '22 04:10

Shakeer Hussain


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.

like image 28
gogev Avatar answered Oct 06 '22 04:10

gogev


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

like image 26
macromediax Avatar answered Oct 06 '22 05:10

macromediax