title: Bootstrap design with white space both side
body: <p>I am using Bootstrap to design a webpage. Since many people uses large screens I prefer webpages where the content is centered with some white space on both sides. An example is this page:</p>
  
  <p><a href="https://www.nhstateparks.org/visit/state-parks/dixville-notch-state-park.aspx" rel="nofollow noreferrer">https://www.nhstateparks.org/visit/state-parks/dixville-notch-state-park.aspx</a></p>
  
  <p>I have tried to make a design like this:</p>
  
  <pre><code>    &lt;div class="container-fluid text-center"&gt;
          &lt;div class="row content"&gt;
               &lt;!--Uses an offset to get white space on left   --&gt;
              &lt;div class="col-sm-2 col-md-offset-2"&gt;
                  Sidebar with some links
              &lt;/div&gt;
              &lt;div class="col-sm-6"&gt;
                  Main content
              &lt;/div&gt;
              &lt;div class="col-sm-2"&gt;
              &lt;!--This is added only to get white space on right  --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>But I want the page to behave like this page do. When you shrink the page, it will "use" the blank space on left and right before it start to scale the content. I see stackoverflow.com also do this. It to not start to scale the content before the white space on both side are used.</p>