Want to split one full page to four div with same size using Bootstrap

Question

i confuse when using height: 100% and the content set to 25% 25% 25% 25% why it's not working (in my browser each div look really small and 100% not fill full page). Can anyone find my wrong here ?

My HTML Code :

<div class="container-fluid" style="height: 100%">
        <div class="row" style="height: 25%;">
            <div class="col-xs-4 col-md-4" style="background-color:red;">
                .col-xs-9 .col-md-7
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:yellow;">
            .col-xs-3 .col-md-5
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:lavender;">
            .col-xs-3 .col-md-5
        </div>
    </div>

    <div class="row" style="height: 25%;">
        <div class="col-xs-4 col-md-4" style="background-color:red;">
            .col-xs-9 .col-md-7
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:yellow;">
            .col-xs-3 .col-md-5
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:lavender;">
            .col-xs-3 .col-md-5
        </div>
    </div>

    <div class="row" style="height: 25%;">
        <div class="col-xs-4 col-md-4" style="background-color:red;">
            .col-xs-9 .col-md-7
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:yellow;">
            <h1 class="h1Title">Azkaban</h1>
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:lavender;">
            .col-xs-3 .col-md-5
        </div>
    </div>

    <div class="row" style="height: 50%;">
        <div class="col-xs-4 col-md-4" style="background-color:red;">
            .col-xs-9 .col-md-7
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:yellow;">
            .col-xs-3 .col-md-5
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:lavender;">
            .col-xs-3 .col-md-5
        </div>
    </div>
</div>

I already read : How can I make Bootstrap columns all the same height?

But i still don't understand why 100% -> 25% each div not working here?

OUTPUT :

Possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — Sojtin, Apr 24 '17 at 11:04
My question is different, my question about why 100% not working? — Mr. Mike, Apr 24 '17 at 11:06
height in % sometimes does not work as intented. Use vh which translates into viewport height for getting desired result — Harigovind R, Apr 24 '17 at 11:12
CSS 101: height in percent only works if the parent element has an explicit height set. — CBroe, Apr 24 '17 at 11:14
Updated Question, i add parent div with 100% not working too — Mr. Mike, Apr 24 '17 at 11:16

amarnath · Accepted Answer · 2017-04-24T11:24:56.777

.container-fluid {
   height: 100vh;
}

.row .col-xs-4.col-md-4 {
  height: 100%;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>

  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>

  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      <h1 class="h1Title">Azkaban</h1>
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>

  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
</div>

@Michael, hopefully it should work as we are not updating any `width` values. — amarnath, Apr 24 '17 at 11:34
Ok, thank you for help me. I mark your answer as correct answer. — Mr. Mike, Apr 24 '17 at 11:39

Shiva127 · Answer 2 · 2017-04-24T11:27:19.027

Using %

html,
body,
.container-fluid {
  height: 100%;
}

.row {
  height: 25%;
}

.row > div {
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      <h1 class="h1Title">Azkaban</h1>
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
</div>

Using vh

.row {
  height: 25vh;
}

.row > div {
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      <h1 class="h1Title">Azkaban</h1>
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
</div>

Both the solution not working for me. the second solution make each gap of div longer but each div size still follow content — Mr. Mike, Apr 24 '17 at 11:23

score 2 · Answer 3 · edited May 23 '17 at 11:33

2

Add this css:

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.row > [class*='col-'] {
     display: flex;
     flex-direction: column;
}

Hope this will work but remove the height from row. However if you are using height as "VH" safari browser will not support this.

There is already fiddle for this here

edited May 23 '17 at 11:33

Community

1
1

answered Apr 24 '17 at 12:22

Sangrai

687
1
6
19

1

For image setting use this css for Safari browser: img { border: 0; float: left; width: 100%; } – Sangrai Apr 24 '17 at 12:27

Want to split one full page to four div with same size using Bootstrap

3 Answers3