Grid with bootstrap dynamically height?

Question

I would like to implement the following layout (image) with bootstrap 4, but he does not adjust the height of the div 1 and 2 dynamically on the content in div 3. Can someone help me?

<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col" style="background:yellow;">
      <div class="row">
        <div class="col" style="background:red;">1</div>
      </div>
      <div class="row">
        <div class="col" style="background:white;">2</div>
      </div>
    </div>
    <div class="col" style="background:green;">
      3<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
      no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

score 1 · Accepted Answer · answered Feb 28 '19 at 16:14

Use this in your left column (note the change in markup):

<div class="col flex-column d-flex p-0" style="background:yellow;">
  <div class="col" style="background:red;">1</div>
  <div class="col" style="background:white;">2</div>
</div>

Make the col a column flexbox by adding d-flex flex-column and remove padding by p-0 class - make the child elements col class. See demo below:

<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col flex-column d-flex p-0" style="background:yellow;">
      <div class="col" style="background:red;">1</div>
      <div class="col" style="background:white;">2</div>
    </div>
    <div class="col" style="background:green;">
      3<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
      no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

that was the solution, thanks – ibu400 Mar 01 '19 at 07:44 — ibu400, Mar 01 '19 at 07:44

Grid with bootstrap dynamically height?

1 Answers1