Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Framework Basics Prototyping with Bootstrap Downloading Bootstrap

Carla Thomas
seal-mask
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points
Posted by Carla Thomas
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points

CSS not effecting browser

I have downloaded the project files, however, after adding classes (i.e. container, page-header, etc.) and saving the index.html there are not any changes in the browser.

What could possibly be the reason for this?

Thanks in advance.

Carla Thomas
seal-mask
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points
Carla Thomas
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points

I am using the files included with "Frameworks Basics"....The links are in place and the videos don't mention any addition of links...

 <head>
    <title>Ribbit - A Treehouse Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>

4 Answers

Carla Thomas
seal-mask
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points
Carla Thomas
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points

I am using the files included with "Frameworks Basics"....The links are in place and the videos don't mention any addition of links...

 <head>
    <title>Ribbit - A Treehouse Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
ryan champin
ryan champin
16,836 Points
ryan champin
ryan champin
16,836 Points

with bootstrap, you need to connect the stylesheet AND the javascript files. Also be careful when you create divs using their conventions ex: .container, .nav etc.....they are class specific i believe so #container will do nothing..it needs a class

Carla Thomas
seal-mask
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points
Carla Thomas
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points

I am using the files included with "Frameworks Basics"....The links are in place and the videos don't mention any addition of links...

 <head>
    <title>Ribbit - A Treehouse Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
ryan champin
ryan champin
16,836 Points
ryan champin
ryan champin
16,836 Points

ok.....so heres my suggestion....go to getbootstrap.com and download your own un-customized version of bootstrap....link the stylesheet and the javascript files.....itll work in the tutorials bc its just an updated version as you know....try it then....if it doesnt work....use chromes inspector and check for any errors....also what exactly happens? bc if literally nothing happens when u reload it means ur not connecting to the css properly.....maybe a wrong file extension or something

Joshua Bivens
Joshua Bivens
8,586 Points
Joshua Bivens
Joshua Bivens
8,586 Points

I had the same problem, then realized that my 

 <link href="css/bootstrap.min.css...>

should actually have been 

<link href="css/bootstrap/dist/css/bootstrap.min.css...>

There's three more files you have to navigate through to get to it if you have the full download.

The file structure you have would be your css file, then just the boostrap.min.css inside of it.

The full download's file structure (if you put it in your css folder) is css, then, bootstrap, then the dist folder, then css within that, then bootstrap.min.css.

Hope this helps.