col-*-12 (col-xs / col-sm / etc) use in Bootstrap 3

Question

I see something like the following in code examples on StackOverflow and in themes for sale even (never in Bootstrap's examples).

<div class="container">
  <div class="row">
    <div class="col-xs-12">
       <p>Words go here</p>
     </div>
    </div>
  </div>

OR

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
       <p>Words go here</p>
     </div>
    </div>
  </div>

It drives me nuts because both are incorrect for full width single columns as per Bootstrap's own documentation and common sense.

When do you actually use the grid system? When does col-*-12 come into play?

Answer 1

Your frustration is right.. <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> is totally redundant.

Because Bootstrap 3+ is mobile first, any col-classes you declare travel up, meaning they apply to the declared device (xs, sm, md, lg) and larger. So, col-xs-12 col-sm-12 is redundant. Just use col-xs-12 for the same effect.

Also, if you don't declare an xs class, the layout will default to col-*-12 once below the smalles col-class you do declare. e.g. <div class="col-sm-6"> is half-width on sm and up, but full-width on xs. Whereas <div class="col-md-6"> is half width on md and up, but full width on sm and xs.

This being said, you should always declare at least one col-class, so it gets the relevant padding and other styling specifics.

Answer 2

If something is full width, you don't need it at all.

Learn: http://getbootstrap.com/examples/grid/

The correct html for both of the above examples is this:

<div class="container">

       <p>Words go here</p>

      </div> <!--/.container for entire grouping of elements you do not want to exceed the width(s) set in the CSS for this class -->

If you want your columns to be full width, it will be under the last column class you used. The following will be full width below where the col-sm- min-width starts (so 767px and UNDER in a default download of Bootstrap 3.x).

<div class="row">
    <div class="col-sm-4">
     Stuff
    </div><!-- /.col-sm-4 -->
    <div class="col-sm-8">
     Stuff
    </div><!-- /.col-sm-8 -->
</div><!-- /.row -->

Don't forget the outer .container or .container-fluid (one per grouping of content that does not change width). The .container or .container-fluid zeros out the negative margin on the .row so you won't get horizontal scroll bars.

The situations when you use col-*-12 is where you want a full width AFTER the min-width of the smaller column class:

<div class="row">
    <div class="col-sm-6 col-md-12">
     Stuff
    </div><!-- /.col-sm-6 col-md-12 -->
  <div class="clearfix visible-md"></div>
    <div class="col-sm-6 col-md-4">
     Stuff
   </div><!-- /.col-sm-6 col-md-12 -->
</div><!-- /.row -->

Anyway, col-*-12 comes in handy in nesting situations, especially with forms.