CODEWITHSUNDEEP
htmlcss
Mr. Mike
Mr. Mike

Reputation: 453

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

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 : enter image description here

Upvotes: 0

Views: 404

Answers (3)

Sangrai
Sangrai

Reputation: 687

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

Upvotes: 2

Shiva127
Shiva127

Reputation: 2623

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>

Upvotes: 4

amarnath
amarnath

Reputation: 785

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

Upvotes: 5

Related Questions