title: Adding background color and padding to row in Twitter bootstrap
body: <p>I realise that padding in Twitter Bootstrap has been done somewhat to death and I have previously managed to achieve it to an extent but am currently stuck on trying to get my three <code>span4</code> columns to sit nicely on a padded white background row.</p>
  
  <p>I have tried various ways of adding in an extra, unsemantic <code>div</code> but to no avail.</p>
  
  <p>I have tried:</p>
  
  <pre><code>&lt;div id="mydiv"&gt;
  
              &lt;div class="wrap"&gt;
  
                  &lt;div class="row"&gt;
  
                      &lt;div class="span4"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt; &lt;!-- .span4 --&gt;
  
                      &lt;div class="span4"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt; &lt;!-- .span4 --&gt;
  
                      &lt;div class="span4"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt; &lt;!-- .span4 --&gt;
  
                  &lt;/div&gt; &lt;!-- .row --&gt;
  
              &lt;/div&gt; &lt;!-- wrap --&gt;
  
          &lt;/div&gt; &lt;!-- mydiv --&gt;
  </code></pre>
  
  <p>And also:</p>
  
  <pre><code>&lt;div id="mydiv" class="row"&gt;
  
              &lt;div class="wrap"&gt;
  
                      &lt;div class="span4"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt; &lt;!-- .span4 --&gt;
  
                      &lt;div class="span4"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt; &lt;!-- .span4 --&gt;
  
                      &lt;div class="span4"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                              &lt;li&gt;Random link&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt; &lt;!-- .span4 --&gt;
  
              &lt;/div&gt; &lt;!-- wrap --&gt;
  
          &lt;/div&gt; &lt;!-- mydiv --&gt;
  </code></pre>
  
  <p>The "wrap" div has the following CSS:</p>
  
  <pre><code>.wrap {
  padding: 35px;
  background-color: #F7F7F7;
  border: 1px solid #DDD;
  </code></pre>
  
  <p>}</p>
  
  <p>But each time, the row either gets pushed down to the next line or doesn't wrap around the content at all.</p>
  
  <p>I have previously managed to add padding by using an unsemantic <code>div</code> after the row but this time, it doesn't seem to work.</p>
  
  <p>Could anyone point me in the right direction?</p>
  
  <p>Thanks.</p>