Bootstrap - Columns default value

Question

On the bootstrap grid system documentation says:

Content should be placed within columns, and only columns may be immediate children of rows.

So on the following example for smartphones and tablets:

<div class="row">
  <div class="col-xs-12 col-sm-12">Column One</div>
  <div class="col-xs-12 col-sm-12">Column Two</div>
</div>

Do we have to set the classes col-xs-12 col-sm-12 when a column should fill the row width or is there a default class that we can set for both devices? If we don't set the col classes, the content is pushed left and right due to the negative margins on the .row class.

Answer 1

As Bootstrap is mobile first, if you set .col-xs-12, your div will have a full with on every device. This means you don't have to set .col-sm-12.

<div class="row">
  <div class="col-xs-12">
    <!--
      12-col on xs/sm/md/lg 
    -->
  </div>
  <div class="col-xs-12 col-6-md">
    <!--
      12-col on xs/sm
      6-col on ms/lg
    -->
  </div>
  <div class="col-xs-12 col-6-md col-12-lg">
    <!--
      12-col on xs/sm
      6-col on md
      12-col on lg
    -->
  </div>
</div>

Plus, the default value is precisely .col-xs-12. This means you don't even have to specify it:

<div class="row">
  <div class="col-md-6">
    <!--
      12-col on xs/sm
      6-col on md
    -->
  </div>
</div>