css - Bootstrap row within nested column, responsive height -
i trying have gray text fill rest of available space in column while growing/shrinking window size (the remaining 100px or so). bottom of gray text area should large image on left.
i thinking there flexbox solution, nothing seems work well.
maybe solution remove bs classes entire right column? , write section more css?
img {width:100%} .content-text {background:gray; margin-top:15px;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="content-box"> <div class="item"> <a href="#"> <img class="content-img" src="http://c7.staticflickr.com/9/8192/8086114606_c8b71f3277_b.jpg" alt="" /> </a> </div> </div> </div><!-- col --> <div class="col-md-6"> <div class="row"> <div class="col-sm-6"> <div class="content-box"> <div class="item"> <a href="#"> <img class="content-img" src="http://c5.staticflickr.com/8/7350/14012783868_630bff261c_b.jpg" alt="" /> </a> </div> </div> </div><!-- col --> <div class="col-sm-6"> <div class="content-box"> <div class="item"> <a href="#"> <img class="content-img" src="http://c5.staticflickr.com/8/7350/14012783868_630bff261c_b.jpg" alt="" /> </a> </div> </div> </div><!-- col --> </div> <div class="row"> <div class="col-md-6"> <div class="content-box"> <div class="item"> <div class="content-text"> <p>hello world</p> </div><!-- content-text --> </div><!-- item --> </div><!-- content-box --> </div><!-- col --> <div class="col-md-6"> <div class="content-box"> <div class="item"> <div class="content-text"> <p>hello world</p> </div><!-- content-text --> </div><!-- item --> </div><!-- content-box --> </div><!-- col --> </div><!-- row --> </div><!-- col --> </div><!-- row --> <div class="row"> <div class="col-md-6"> <div class="placeholder-box"></div> </div><!-- col --> <div class="col-md-6"> <div class="row"> <div class="col-md-6"> <div class="placeholder-box"></div> </div><!-- col --> <div class="col-md-6"> <div class="placeholder-box"></div> </div><!-- col --> </div><!-- row --> </div><!-- col --> </div><!-- row --> </div><!-- container -->
try this, not best code i'm sure can think of now.
solution simple:
- use flexbox make first 2 col equal height
- then make container inside right col (which contain 2 small col - , had modify html structure here, hope not go wrong intend) full height of right col
- add background in 1 of container
- make content-text area have border top make seperate img.
that all, can see better in code below. hope help!
img {width:100%} .content-box {background-color: gray} .content-text {border-top:15px solid white;} .row-eq-height {display: flex; flex-wrap: wrap} .fullheight {display: flex}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row row-eq-height"> <div class="col-md-6"> <div class="content-box"> <div class="item"> <a href="#"> <img class="content-img" src="http://c7.staticflickr.com/9/8192/8086114606_c8b71f3277_b.jpg" alt="" /> </a> </div> </div> </div><!-- col --> <div class="col-md-6 fullheight"> <div class="row fullheight"> <div class="col-sm-6 fullheight"> <div class="content-box fullheight"> <div class="item"> <a href="#"> <img class="content-img" src="http://c5.staticflickr.com/8/7350/14012783868_630bff261c_b.jpg" alt="" /> </a> <div class="content-text"> <p>hello world</p> </div><!-- content-text --> </div> </div> </div><!-- col --> <div class="col-sm-6 fullheight"> <div class="content-box fullheight"> <div class="item"> <a href="#"> <img class="content-img" src="http://c5.staticflickr.com/8/7350/14012783868_630bff261c_b.jpg" alt="" /> </a> <div class="content-text"> <p>hello world</p> </div><!-- content-text --> </div> </div> </div><!-- col --> </div> </div><!-- col --> </div><!-- row --> <div class="row"> <div class="col-md-6"> <div class="placeholder-box"></div> </div><!-- col --> <div class="col-md-6"> <div class="row"> <div class="col-md-6"> <div class="placeholder-box"></div> </div><!-- col --> <div class="col-md-6"> <div class="placeholder-box"></div> </div><!-- col --> </div><!-- row --> </div><!-- col --> </div><!-- row --> </div><!-- container -->