Learning Bootstrap

[in2tech]

I am trying to learn a little bit about HTML, CSS, and Bootstrap at the moment. I have completed some tutorials on creating a basic website by hand coding with html and css, and now want to learn Bootstrap a little.

I am having a problem getting started. I can't get the tutorial (have tried several on youtube, etc..) to display properly.

Currently I am following this beginners tutorial:

http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/

Instead of the navbar looking like the tutorial when I get started mine looks like this:

http://content.screencast.com/users/in2tech/folders/Jing/media/351dc02a-4890-4cde-900b-b151840bdf95/00000015.png

Should look like this:

http://screencast.com/t/NYebf7wfn

I have tried both the CDN links, getting files and have installed them locally in my folder and can not get it to display properly.

Tried different browser's even and still not looking correct.

Any ideas what is wrong in my code. I though I followed all the tutorials to the letter but maybe I am missing something simple.

Thanks for you help!

[Tom]

Does the file exist within /Desktop/sitepoint/css and is it called bootstrap.css?

Always check the console in your browser it'll help you.

[in2tech]

Does the file exist within /Desktop/sitepoint/css and is it called bootstrap.css?

Always check the console in your browser it'll help you.

Figured out the CDN version, sneaky little http: Now I have to get the local version to work. Yes I have the files in my local project folder and they are named correctly. For now I am going to use the CDN version since it is working and figure out the local later.

Here was my problem with the CDN version:

Header Code:

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

Above </body> code:

<!-- jQuery (necessary for Bootstrap's Javascript plugins) -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled and minified Javascript -->

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Now it looks correct. Although a different tutorial:

http://screencast.com/t/x5VxFbyqW7LO

And the mobile version:

http://screencast.com/t/qwF2F8mA

Well not really version, but when I pull the browser screen in close it switches to mobile, or when viewed on mobile device!

Thanks, it always the little things like a colon , semi-colon, http: , { curly brackets }, etc.....