title: Bootstrap: Background colour 100% screen width?
body: <p>I'm trying to create a fairly simple website in bootstrap. I'd like each section to have its own background colour similar to what is done here: <a href="https://flaticons.co/" rel="nofollow">https://flaticons.co/</a>. Do you happen to know if there's a class or css styling that will allow the background to be 100% width?</p>
  
  <pre><code>&lt;div id="main" class="container"&gt;
          &lt;section class="row"&gt;
              &lt;p class="col-md-4 col-sm-6" col-sm-push-7&gt;&lt;img src="images/an_image.gif"&gt;&lt;/p&gt;
              &lt;h1 class="col-md-8 col-sm-6" col-sm-pull-7&gt;Some content...&lt;/h1&gt;
          &lt;/section&gt;
  
          &lt;!-- ===== background colour wanted here 100% window width===== --&gt;
          &lt;section id="about" class="row"&gt;
              &lt;div&gt;
                  &lt;p&gt;Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;
                  &lt;p&gt;Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>-----------This works:</p>
  
  <p>Guys! Guys!</p>
  
  <p>Thanks for those answers. They're great for when bootstrap isn't involved. When bootstrap IS involved... this works. So many divs :( But it's working great! </p>
  
  <pre><code>&lt;div class="secondary"&gt;
       &lt;section class="row container"&gt;
            &lt;div class="row"&gt;
                 &lt;p class="col-md-4 col-sm-6" col-sm-push-7&gt;&lt;img src="images/temp_riley.gif"&gt;&lt;/p&gt;
                  &lt;h1 class="col-md-8 col-sm-6" col-sm-pull-7&gt;Hi. I'm Riley: a problem solving UX designer (and front-end developer) who is intrigued by change and loves a good challenge. &lt;/h1&gt;
            &lt;/div&gt;
       &lt;/section&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>css: 
  
  .secondary {
      background: green;
  }
  </code></pre>