CODEWITHSUNDEEP
csshtml
nowox
nowox

Reputation: 29096

How to make Bootstrap rows fill the height of the parent container?

The the following example, I would like my rows to fill the total height of the parent container with the following rule:

Here the code I wrote:

<div class="container border border-warning" style="height: 400px">
  <div id="a" class="row row-4 bg-primary">A</div>
  <div id="b" class="row row-2 bg-secondary">B</div>
  <div id="c" class="row row-3 bg-info">C</div>
</div>

https://codepen.io/anon/pen/mjoKpG

How should I approach this problem?

Upvotes: 0

Views: 1519

Answers (2)

MadPapo
MadPapo

Reputation: 495

Add these CSS rules

.container {
    display: inline-flex;
    flex-flow: column;
}
.container > #a{
    flex:0.33 1;
}
.container > #b{
    flex:0.17 1;
}
.container > #c{
    flex:0.5 1;
}

Upvotes: 0

Allan
Allan

Reputation: 2939

Use height percents:

#a { height: 33%}
#b { height: 17%}
#c { height: 50%}

https://codepen.io/anon/pen/ejXKQg

Upvotes: 1

Related Questions