8

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!

zwickzwack
  • 89
  • 1
  • 1
  • 3
  • 3
    The bootstrap grid is composed of 12 columns. If you want to have four equal parts, you should use `col-xs-3` instead. Unless you are thinking of four equal `rows`... I guess the question is, what do you mean by four equal 'parts'? – blurfus Jan 07 '15 at 18:13
  • This thread may have the answer you are seeking: http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – anevaude Jan 07 '15 at 18:15

1 Answers1

14

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
Example

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%;
}
MrGood
  • 545
  • 5
  • 21
  • Hej, thanks a lot. But I would like to have 2 at the top and 2 at the bottom of the page. So it's basically like each part has 50% height and 50% width of the page. And it should like that without regard for the content.. – zwickzwack Jan 08 '15 at 14:02
  • 1
    The image was helpful to communicate what you were expecting the layout to look like. Next time consider adding similar things to the question, this allows the community to more effectively answer your question. – MrGood Jan 08 '15 at 22:26
  • Thank you very much. It's working but I think there is just a little issue with that. The reason why I'm using col-md-6 is that I would like to have quadrants just for medium size screens and bigger. I tried to add "col-sm-12" to the class to have just one row below the other for sm-screens. But it didn't work. I don't know but shouldn't I also use "container" and "row" when using "col-*"..probably I have to use media queries for that? Thanks for your help anyway. – zwickzwack Jan 09 '15 at 19:54
  • I think media queries would be your best option. It would be easy to set it up so that at smaller screen sizes your quadrants could stack on top of each other. – MrGood Jan 09 '15 at 21:02