title: Single full-width column in row with twitter bootstrap grid
body: <p>When using bootstrap's grid, what is the best way to markup a single full-width column in a row?</p>
  
  <p>Do you have to use container and row to hold the column (<code>.container &gt; .row &gt; .col-xs-12 &gt; .actual-content</code>), or can you get rid of the row and column altogether and simply use a wrapping container (<code>.container &gt; .actual-content</code>)?</p>
  
  <p>Let's say</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;!-- multiple columns --&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
        &lt;p&gt;Actual content goes here. It will span the entire width.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
      &lt;!-- multiple columns --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>vs</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;!-- multiple columns --&gt;
    &lt;/div&gt;
  
    &lt;p&gt;Actual content goes here. It will span the full width.&lt;/p&gt;
  
    &lt;div class="row"&gt;
      &lt;!-- multiple columns --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is one approach considered superior over the other? Since the column spans the entire width for all media sizes, I don't need any responsive features. Rendered output should be the same, but maybe there are subtle differences which I'm not aware of. Using container, row, and column seems like overkill …</p>