Bootstrap 3 grid, does it *really* matter how many columns are in a row?

Question

I have a form layout that has bootstrap 3 form groups on it. I want these form groups in a single column on < small, 2 columns on tablet size break and 4 column on larger screens.

I have it apparently working perfectly, however after doing some reading here what I did seems to violate the supposed rule that every column in a row must add up to 12. However every tutorial and docs I could find always use weasel words like "should" or "ideally" when saying it should add up to 12. There doesn't seem to be a clear guidance here.

I defined my groups like this:

<div class="row">
    <div class="form-group col-md-6 col-lg-3" ><!--....etc-->

and I currently have 4 of these in each row. This means that the 4 * col-lg-3 adds up to 12 but the 4 * col-md-6 form group divs adds up to 24 not 12.

However this doesn't seem to matter and it works perfectly at each breakpoint.

Should I be concerned? Does it matter in any way? Surely I'm not supposed to do two completely different layouts that duplicate all these controls once each for col-md-6 and col-lg-3 on the same page?

Answer 1

No, there's nothing to mandate that the bootstrap grid must add up to 12 columns.
It's just a preference / stylistic thing.

Less than 12 Columns -> Aligns Left:

If you have less than twelve of the columns filled, by default they will left align, leaving empty space to the right.

The following code:

<div class='row'>
    <div class="col-xs-2">Hi</div>
    <div class="col-xs-2">Hi</div>
</div>

.row > div {
    background: lightgrey;
    border: 1px solid grey;
}

Results in this: (Demo in Fiddle)

More than 12 Columns -> Wraps:

If the total adds to more than 12 columns, as long as the columns are within a row class, they will just wrap to additional rows. A good use case would be a photo grid system where you would like to add tons of photos but don't know how many rows you'll have and would still like to define the number of columns.

The following code:

<div class='row'>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
</div>

Results in this: (Demo in Fiddle)

Other than that, sometimes it's the case that 12 column layouts look better, but you don't have to use them; it's not a sudoku :)

Answer 2

4 * col-md-6 will create 2 "rows" on a medium screen. Since you are wrapping everything in a .row it will function as expected. If you removed that then things will nest next to each other

e.g.

<div class="row">
  <div class="col-sm-2">Hello</div>
</div>
<div class="row">
  <div class="col-sm-2">Hello</div>
</div>

will produce 2 rows with 1 column each that are each 16.67% as wide as the parent row and floating left because a row has 100% width. Column widths are specified by col-**-(number/ 12) as a percentage (2/12 = 0.166667)

<div class="col-sm-2">Hello</div>
<div class="col-sm-2">Hello</div>

will produce 1 row with 2 columns that are each 16.667% as wide as the parent object. So you could forgo the .row if you did

<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>

This will create: Small Screen ( 4 rows full width columns) Medium Screen( 2 rows 2 columns each 50% width) Large Screen ( 1 row 4 columns each 25% width)

Answer 3

I've seen a lot of website use "col-xs-12 col-md-10 col-md-offset-1" lately. The offset centers the content, yet each row is filled with just 11 cols. If the next element is a col-1 it must include col-offset-1 as well (Forcing a total of 13, moving the col-1 with offset-1 to the next row, aligning nicely). If the next element is wider, it still needs the offset (To skip the first column).

On the CSS side of it, it all works with percentages. If the total width of the columns is over 100% it has to force the next element on a new line. U can easily play with this concept by making a html file with a whole lot of divs. Add the following css to the divs (bootstrap basics)

body > div {
    margin: 0;
    padding: 0;
    float: left;
    width: 8.333333% (or 1/12th)
}

Then u can change the size of indivual divs to see what happens. It might be easier to play with round values (eg. 10%/20%), just sticked to bootstrap here. Hope this gives you an understanding of how the browser handles the bootstrap grid (which you just made a basic version of)

The Bootstrap docs on columnwrapping also give a nice example.