htmlcsstwitter-bootstrapgrid-system

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

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.

Solution

  • 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"