Why does Twitter Bootstrap let me have more than 12 columns?

Question

I have a container that has 2 divs within it: span9 and span3. Inside my span9 div, I would expect to be limited to only 9 columns. However, unless I set the div within the span9 to be a span12, it leaves 3 extra blank columns!

Why on earth would this happen? To me, "span9" should mean that I have 9 columns available. I don't see anything at all that I am using that would cause that content to be allowed to reset to 12 columns in the grid. Makes zero sense.

Answer 1

Note that this doesn't apply to Bootstrap 3 because you can mix and match column classes, so the number in the class names don't have to add up to 12. For example, here's the code for the "Mixed: mobile and desktop" example on their sample grid page:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-lg-8">...</div>
  <div class="col-xs-6 col-lg-4">...</div>
</div>

As you can see, the concept of trying to add up columns to equal 12 doesn't even make sense with Bootstrap 3. If you look inside bootstrap.css then you'll see that the column classes are simply percentages relative to the container div, e.g.:

.col-sm-6 {
  width: 50%;
}

In this case, if the container's width is 1170px, then each col-sm-6 div would have a width equal to 50% of 1170px (let's ignore the row's -15px side margins for simplicity's sake) regardless of how many columns are in that row. If there are more columns than could fit inside the container, then the columns would automatically wrap. If some of your columns are super tall, then you would want to use <div class="clearfix"></div> with a combination of the visible-* or hidden-* classes to ensure consistent row heights.

Reference: Boostrap 3 Grid system

Answer 2

Further to the comment from @firtive, the code for nested columns is different for default responsive (non-fluid) grids or for fluid grids.

With the default grid, use class="row" and the number of nested columns in your case should indeed total 9 (the number of columns of its parent). This is because the columns have a fixed width.

With fluid grids, use class="row-fluid" and the number of nested columns should add up to 12. This is because the column widths vary, based on a percentage of the width of their parent.

Source Bootstrap Docs

See examples below.

Hope this helps

Default non-fluid example see this live

<div class="row">

 <div class="span9">

  <div class="row"> <!-- start nested row -->  

    <div class="span6">nested col</div>
    <div class="span3">nested col</div>  

  </div>           <!-- end nested row -->

</div> <!-- end span 9 parent  -->

<div class="span3">
span 3
</div>

</div> <!-- end row -->

Fluid Grid Example see this live

<div class="row-fluid">

  <div class="span9">

    <div class="row-fluid"> <!-- start nested fluid row -->  

      <div class="span6">nested col</div>
      <div class="span6">nested col</div>  

    </div>                 <!-- end nested fluid row -->

  </div> <!-- end span 9 parent -->

  <div class="span3">span 3</div>
</div> <!-- end row -->