bootstrap 4 row height

Question

I try to have something like this with bootstrap 4

with equal size in the height of green rows and red row

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
   <div class="container">
        <div class="row">
          <div class="col-md-8 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
    <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">
          <div class="col-md-6 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
    <img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
    
    </div></div>
       <div class="col-md-6 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
    <img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
    
    </div></div>
       <div class="col-md-12"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
    <img src="http://lorempicsum.com/rio/800/500/3" class="img-fluid" alt="Responsive image">
    
    </div></div>
       </div>
    </div>   
       
        </div>
    </div>

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

Answer 1

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>

https://www.codeply.com/go/tgzFAH8vaW