It is necessary to fill all 12 columns of a row of bootstrap's grid system?

Question

It is necessary to fill all 12 columns of a row?

Example 1 - only 2 columns from a total 12 of the row are declared:

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

Example 2 - the unused columns are declared too:

<div class="container">
  <div class="row">
    <div class="col-sm-2">
      ...
    </div>
    <div class="col-sm-10"></div>
  </div>
</div>

It is possible for a browser to scale the 2 example in different ways? I tend to think that a good practice is the Example 2.

Answer 1

Since you're adding a new row it really doesn't matter. If you were using column wrapping where col units in each row may exceed 12 you would need the placeholder col-sm-10.

http://www.codeply.com/go/D1RLpfT8pD

IMO, the first one is preferred since it requires less markup. Also, if you're nesting columns the docs specifically state..

"it is not required that you use all 12 available columns"

Answer 2

No. You can use Bootstrap's offset columns.

If you don't want to use the space to the left of your column, use the offset column classes. If you don't want to use space on the right of your column, set the column to the width that you need it to be. As long as you do this in a .row you should be fine.

In the example below I am not using 4 of the 12 columns. We're using offset to "ignore" two columns on the left and setting the column to 8 instead of 10 to "ignore" two columns on the right. This effectively centers the DIV in the row. No need for extra markup. Try it on a desktop viewport.

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' );

.container {
  border: 1px dashed red;
}
.col-md-offset-2 {
  border: 1px dashed blue;
}

<div class="container">
  <div class="row">
  
    <div class="col-md-offset-2 col-md-8">
      I am a 8 column DIV.
    </div>
  </div>
</div>