Bootstrap 3: split page in four equal parts - html

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%;
}