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).

Answer 1

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:

       
Words go here

      
 

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).

    

     Stuff
    

    

     Stuff
    

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:

    

     Stuff
    

  

    

     Stuff
   

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