ブートストラップの列の高さを幅と同じに設定する

Question

赤い背景領域をデモの幅と同じ高さに設定するにはどうすればよいですか？

デモ：https://jsfiddle.net/tv0b5m3b/

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 

 
     <div class="row"> 
 
     \t <div class="col-sm-12"> 
 

 
      <div class="col-sm-3 col-xs-6" style="background:red;"> 
 
       <button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i><br>Resend</button> 
 
      </div> 
 

 
      <div class="col-sm-3 col-xs-6"> 
 
       <button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i><br>Resend</button> 
 
      </div> 
 

 
      <div class="col-sm-3 col-xs-6"> 
 
       <button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i><br>Resend</button> 
 
      </div> 
 

 
      <div class="col-sm-3 col-xs-6"> 
 
       <button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i><br>Resend</button> 
 
      </div>

https://jsfiddle.net/tv0b5m3b/

Answer 1

https://jsfiddle.net/vivekkupadhyay/tv0b5m3b/1

/* Latest compiled and minified CSS included as External Resource*/ 
 

 

 
/* Optional theme */ 
 

 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
body { 
 
    margin: 10px; 
 
}

<div class="container"> 
 

 
    <div class="row"> 
 
    <div class="col-sm-12" style="background:red;"> 
 
     <div class="row"> 
 
     <div class="col-sm-3 col-xs-6"> 
 
      <button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i> 
 
      <br>Resend</button> 
 
     </div> 
 

 
     <div class="col-sm-3 col-xs-6"> 
 
      <button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i> 
 
      <br>Resend</button> 
 
     </div> 
 

 
     <div class="col-sm-3 col-xs-6"> 
 
      <button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i> 
 
      <br>Resend</button> 
 
     </div> 
 

 
     <div class="col-sm-3 col-xs-6"> 
 
      <button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i> 
 
      <br>Resend</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>