title: Bootstrap 3: split page in four equal parts
body: <p>I'm trying to split a section of my one-page site (using Bootstrap 3) into 4 equal parts but I can't get it to work.</p>
  
  <p>I thought I could just add extra classes to each col-md-6 but the problem is actually that the height is aligned to the content and I can't use fixed heights because it should be responsive...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    ...
    
  &lt;/section&gt;
  
  &lt;section id="theproject" class="project"&gt;
      &lt;div class="container" &gt;
    &lt;div class="row"&gt;
        &lt;div class="col-md-6"&gt;
        &lt;/div&gt;
            TOPLEFT
     &lt;div class="col-md-6"&gt;
      TOPRIGHT
     &lt;/div&gt;
       &lt;/div&gt;
    
    &lt;div class="row"&gt;
        &lt;div class="col-md-6"&gt;
               BOTTOMLEFT
        &lt;/div&gt;
     
        &lt;div class="col-md-6"&gt;
             BOTTOMRIGHT
        &lt;/div&gt;    
       &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My custom.css looks like this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.project {
      height: auto !important;
      min-height: 100%;
      overflow: hidden;
   background: white;
   font-family: 'Open Sans', sans-serif;
   font-style: normal;
      font-size: 16px;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for your help!</p>