Search code examples
htmlcsstwitter-bootstrapgrid-layout

Bootstrap grid works properly in bootply but not in html, why?

All I'm trying to do is use the grid system to make two columns, one of length 4 and one of length 8.

My bootply is working perfectly. http://www.bootply.com/Cv6nENbxG6

However, my html code is not

<body>    
    <div class="container">
        <h1>Reviews</h1>
            <div class="row">
                <div class="col-xs-4" style="background-color:lavender;">.col-xs-4</div>
                <div class="col-xs-8" style="background-color:lavenderblush;">.col-xs-8</div>
            </div>
    </div>
</body>

The only thing I have in the head section is the bootstrap css. Any thoughts on what is causing the columns not to work?

Additionally, here is a jsfiddle which does not work. No idea what's going on at this point https://jsfiddle.net/q2djuchm/1/

Solution

  • For sanity check, are you including the bootstrap.css file in your html? Edit: It's cause the versions of bootstrap are different. Bootply is using 3.3.6, and jsfiddle is using 2.3.2. If you would like to use version 2.3.2, you need to use span4 and span8 getbootstrap.com/2.3.2/scaffolding.html#gridSystem