बूटस्ट्रैप 4 पंक्ति की ऊँचाई

Question

मैं हरे रंग की पंक्तियों की ऊंचाई और लाल पंक्ति में बराबर आकार के साथ बूटस्ट्रैप 4

साथ कुछ इस तरह की कोशिश

<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>

सभी छवियों एक ही आकार है और उत्तरदायी हैं लेकिन समस्या यह है कि मुझे हरी पंक्तियों और लाल पंक्ति की ऊंचाई में बराबर आकार नहीं मिल सकता है

Answer 1

आकार देने वाली उपयोगिता कक्षाओं का उपयोग करें ...

• h-50 = ऊंचाई 50%
• h-100 = ऊंचाई 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>