title: col-*-12 (col-xs / col-sm / etc) use in Bootstrap 3
body: <p>I see something like the following in code examples on StackOverflow and in themes for sale even (never in Bootstrap's examples).</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
         &lt;p&gt;Words go here&lt;/p&gt;
       &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>OR</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
         &lt;p&gt;Words go here&lt;/p&gt;
       &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>It drives me nuts because both are incorrect for full width single columns as per Bootstrap's own documentation and common sense.</strong> </p>
  
  <p><img src="https://i.stack.imgur.com/0slnm.png" alt="enter image description here"></p>
  
  <p>When do you actually use the grid system? When does <code>col-*-12</code> come into play?</p>