Bootstrap 3: split page in four equal parts

Question

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.

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...

<section>
  ...
  
</section>

<section id="theproject" class="project">
    <div class="container" >
		<div class="row">
	    	<div class="col-md-6">
	    	</div>
		        TOPLEFT
			<div class="col-md-6">
				TOPRIGHT
			</div>
    	</div>
		
		<div class="row">
    		<div class="col-md-6">
       		    BOTTOMLEFT
    		</div>
			
    		<div class="col-md-6">
     		    BOTTOMRIGHT
    		</div>    
    	</div>
    </div>
</section>

My custom.css looks like this:

.project {
    height: auto !important;
    min-height: 100%;
    overflow: hidden;
	background: white;
	font-family: 'Open Sans', sans-serif;
	font-style: normal;
    font-size: 16px;
}

Thanks for your help!

Answer 1

If I understand what you are asking, here is how you can split your bootstrap into 4 equal parts. The heights will adjust to match the height of the column with the most(tallest) content.

Here is the Bootply so you can try it out.

HTML

<div class="row equal">

      <div class="col-xs-6 col-sm-3">
        content
      </div>

      <div class="col-xs-6 col-sm-3">
        content
      </div>

      <div class="col-xs-6 col-sm-3">
      content
      </div>

      <div class="col-xs-6 col-sm-3">
      content
      </div>

    </div>

CSS

 .equal, .equal > div[class*='col-'] {  
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex:1 0 auto;
  }

EDITED: Solution for 4 equal quadrants

See the working Bootply here http://www.bootply.com/qmwjea4pG3#

Example Below

HTML

<div class="contents">
<div class="col-md-6 quarter" style="background-color:blue;">test</div>
<div class="col-md-6 quarter" style="background-color:red;">test</div>
<div class="col-md-6 quarter" style="background-color:yellow;">test</div>
<div class="col-md-6 quarter" style="background-color:green;">test</div>

CSS

html,body {
  padding:0;
  margin:0;
  height:100%;
  min-height:100%;
 }

.quarter{
  width:50%;
  height:100%;
  float:left;
}
.contents{
  height:50%;
  width:100%;
}