How to make columns in Bootstrap grid (instead of stacked)?

Question

I'm experimenting with Bootstrap and using jsfiddle.net to create some quick and dirty tests.

I'm running into a brick wall on a really simple test however. I just want to see the grid system in Bootstrap, so I've duplicated their first example:

<div class="row">
  <div class="span4">Span 4</div>
  <div class="span8">Span 8</div>
</div>

However, it doesn't seem to work-- the "Span 4" and "Span 8" appear stacked rather than in the expected two-column layout.

Am I missing something obvious? Here's the fiddle: http://jsfiddle.net/8Xf2j/1/

Thanks

Answer 1

If you use the bootstrap-combined.min.css file, it means that the Responsive Layout is active.

Moreover, you have to use a .container to set the minimum width (if not, the body will fit the window, which will result in stacking anyway - on small screens).

Here is one way to use the grid : Demo (jsfiddle)

<div class="container">
    <div class="row">
      <div class="span4">Span 4</div>
      <div class="span8">Span 8</div>
    </div>
</div>

You should notice that only the bootstrap.min.css file is included in the resources.

Answer 2

Notice that the width of span is already defined. Its total width is 960px(span4(320px) + span8(640px) = span12(960px)). So jsfiddle is showing the result like this. Create an html file and try it, setting the border for your reference.