title: Bootstrap CSS for wide and boxed layouts
body: <p>I am using Bootstrap and I need two layouts for wide and boxed. And I want to easly toggle (change) between layouts when needed.</p>
  
  <p>EDIT : How can I do like this : <a href="http://htmlstream.com/preview/unify-v1.7/" rel="nofollow noreferrer">http://htmlstream.com/preview/unify-v1.7/</a>
  Beetween boxed and wide layout changing only in body class (boxed-layout container) I don't need switcher. I will put "boxed-layout container" class to body for boxed layout or I will remove boxed-layout container class from body for wide layout. But I can not do it with bootstap and need help for this.</p>
  
  <p>How can I create wide and boxed layouts like following example images? And how can I change layout via class?</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .main-wrapper-wide {
  width: 100% !important;
  }
  .main-wrapper-boxed {
  width: 850px !important;
  box-shadow: 0 0 5px #ccc;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="main-wrapper-wide or main-wrapper-boxed"&gt;
  &lt;!-- header content here !--&gt;
  &lt;!-- slider here !--&gt;
  &lt;!-- site content here !--&gt;
  &lt;!-- footer content here start !--&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/ndJxI.jpg" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/C6r8g.jpg" alt="enter image description here"></p>