title: Bootstrap 3.0: Full-Width Color Background, Compact Columns in Center
body: <p>I was looking to make a striped business theme, similar to the one created by W3Schools. The theme can be found <a href="http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp" rel="nofollow">here</a>. It is characterized by horizontal sections, separated by different background colors.</p>
  
  <p>The one issue I had with it was that the columns in Services, Portfolio and Pricing, spanned pretty much the full width of the page, which I did not think looked great, particularly for the three pricing boxes, which i feel should be much narrower and still centered. Let's take those pricing boxes as the example for the purpose of the questions.</p>
  
  <p>So, I embarked upon the task of squeezing these three pricing boxes into a narrower shape, centered on the page, while still maintaining the full-width alternating background color. I came up with three ways to do it:</p>
  
  <h2>1) Place a Container inside a Container-Fluid:</h2>
  
  <pre><code>&lt;div id="pricing" class="container-fluid"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-4 col-xs-12"&gt;
                  BlaBlaBla
              &lt;/div&gt;
              ...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <h2>2) Make the following additions/changes to the css and html:</h2>
  
  <pre><code>.fixed-width {
      display: inline-block;
      float: none;
      width: 300px;
  }
  .row-centered {
      text-align: center;
  }
  </code></pre>
  
  <p>-</p>
  
  <pre><code>&lt;div id="pricing" class="container-fluid"&gt;
      &lt;div class="row row-centered"&gt;
          &lt;div class="col-sm-4 col-xs-12 fixed-width"&gt;
              BlaBlaBla
          &lt;/div&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <h2>3) 3x col-sm-2, with empty columns on each side</h2>
  
  <p>Keep the container-fluid layout, but instead of having three <code>col-sm-4</code>, I have an empty <code>col-sm-3</code>, three <code>col-sm-2</code>, and finally an empty <code>col-sm-3</code> (for a total of 12 columns).</p>
  
  <hr>
  
  <h2>4) 3x col-sm-2, with offset-3 to center</h2>
  
  <p>Instead of having three col-sm-4, I have one <code>col-sm-2 col-sm-offset-3</code>, then two <code>col-sm-2</code> (this does not add to 12, but i center with offset).**</p>
  
  <hr>
  
  <p>The problem with both (3) and (4) is that once i shrink the browser window, the boxes become too small before they wrap to the next line (i.e. the text flows out of the box). In (4) it seems if i use <code>container</code> (as opposed to <code>container-fluid</code>), the boxes become too narrow in full-screen even.</p>
  
  <p>What is the correct way of doing this? I assume this is an issue almost everyone making business websites stumbles across, yet I was not able to find the answer online having worked on it for hours.</p>
  
  <p>Thanks in advance,</p>
  
  <p>Magnus</p>