I try to have something like this with bootstrap 4
with equal size in the height of green rows and red row
_x000D_
_x000D_
All images have the same size and are responsive
but the problem is I can't get equal size in the height of green rows and red row
_x000D_
_x000D_
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>_x000D_
<div class="container">_x000D_
<div class="row">_x000D_
<div class="col-md-8 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">_x000D_
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">_x000D_
_x000D_
</div></div>_x000D_
<div class="col-md-4 col-lg-3 G">_x000D_
<div class="row">_x000D_
<div class="col-md-6 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">_x000D_
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">_x000D_
_x000D_
</div></div>_x000D_
<div class="col-md-6 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">_x000D_
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">_x000D_
_x000D_
</div></div>_x000D_
<div class="col-md-12"><div class="card card-inverse" style="background-color: #333; border-color: #333;">_x000D_
<img src="http://lorempicsum.com/rio/800/500/3" class="img-fluid" alt="Responsive image">_x000D_
_x000D_
</div></div>_x000D_
</div>_x000D_
</div> _x000D_
_x000D_
</div>_x000D_
</div>This question is related to
css
twitter-bootstrap
bootstrap-4
The answer is
Use the sizing utility classes...
h-50= height 50%h-100= height 100%
http://www.codeply.com/go/Y3nG0io2uE
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6 B">
<div class="card card-inverse card-primary">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-3 G">
<div class="row h-100">
<div class="col-md-6 col-lg-6 B h-50 pb-3">
<div class="card card-inverse card-success h-100">
</div>
</div>
<div class="col-md-6 col-lg-6 B h-50 pb-3">
<div class="card card-inverse bg-success h-100">
</div>
</div>
<div class="col-md-12 h-50">
<div class="card card-inverse bg-danger h-100">
</div>
</div>
</div>
</div>
</div>
</div>
Or, for an unknown number of child columns, use flexbox and the cols will fill height. See the d-flex flex-column on the row, and h-100 on the child cols.
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6 B">
<div class="card card-inverse card-primary">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-3 G ">
<div class="row d-flex flex-column h-100">
<div class="col-md-6 col-lg-6 B h-100">
<div class="card bg-success h-100">
</div>
</div>
<div class="col-md-6 col-lg-6 B h-100">
<div class="card bg-success h-100">
</div>
</div>
<div class="col-md-12 h-100">
<div class="card bg-danger h-100">
</div>
</div>
</div>
</div>
</div>
</div>
Source: Stackoverflow.com