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>