title: Bootstrap - I am not able to split the container in to columns by calculating by 12
body: <p>I do have a div, I need to make 2 colum in that, one should have divided by another 4 sub colums, and the another column should be full width.</p>
  
  <p>I tried this way, but not result, anyone help me?</p>
  
  <p><a href="http://www.bootply.com/132557" rel="nofollow">Bootstrap Fiddle</a></p>
  
  <p><a href="http://jsfiddle.net/Ce4mq/" rel="nofollow">Demo</a></p>
  
  <p>my html and css:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-6 col1"&gt;
          &lt;div class="col-sm-3"&gt;3 of 12 width&lt;/div&gt;
          &lt;div class="col-sm-2"&gt;2 of 12 width&lt;/div&gt;
          &lt;div class="col-sm-2"&gt;3 of 12 width&lt;/div&gt;
          &lt;div class="col-sm-5"&gt;4 of 12 width&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6 col2"&gt;
          &lt;div class="col-sm-12"&gt;12 of 12 width&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.row{
      border:2px dotted gray;
  }
  
  .col1{
      border:1px solid green;
  }
  
  .col2{
      border:1px solid blue;
  }
  </code></pre>