Bootstrap columns with complex images: you need to have the same column height

Question

I have a Bootstrap section with complex images, and the problem is that I want the second and third columns to always be the same height as the first column. It seems that I can not find a solution for the second and third columns, because they change in height when I change the view to different sizes. It would be ideal for them to always fit the bottom and top.

.gallery { min-height: 980px; } .gallery .row{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } 

 <div class="container-fluid gallery"> <div class="row"> <div class="col-sm-5"> <a href="#"><img src="http://lorempixel.com/528/980/technics" class="img-responsive"></a> </div> <div class="col-sm-4"> <a href="#"><img src="http://lorempixel.com/409/490/technics" class="img-responsive"></a> <a href="#"><img src="http://lorempixel.com/409/490/technics" class="img-responsive"></a> </div> <div class="col-sm-3"> <a href="#"><img src="http://lorempixel.com/324/327/technics" class="img-responsive"></a> <a href="#"><img src="http://lorempixel.com/324/327/technics" class="img-responsive"></a> <a href="#"><img src="http://lorempixel.com/324/327/technics" class="img-responsive"></a> </div> </div> </div> 

Here is Bootply: http://www.bootply.com/mb2Ez6G7r8

Answer 1

Hi Paul, you can solve this way, I see that you are using boostrap, you do not need the flex property in your css.

 <div class="row"> <div class="col-sm-5"> <a href="#"><img src="https://www.jssor.com/demos/img/paint/01.jpg"></a> </div> <div class="col-sm-4"> <a href="#"><img src="https://www.jssor.com/demos/img/paint/02.jpg"></a> <a href="#"><img src="http://lorempixel.com/409/490/technics" class="img-responsive"></a> </div> <div class="col-sm-3"> <a href="#"><img src="https://www.jssor.com/demos/img/paint/06.jpg" class="img-responsive"></a> 

and your css

 .gallery { min-height: 980px !important;} 

Remember to add the download to your html

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

I will explain why you do not need flexibility, Boostrap makes your thml responsive with the .row class, and you can fill it with 12 columns, so you have col-sm- (Number) in your case 5 + 4 + 3 = 12 if you want you can read more in this link grid systemn

Answer 2

 .column-sm-4{ display: flex; flex-direction: row; } 

If height is a problem, you should probably use background-image with css instead of the <img> element. Hope this solves the problem.