Menu
I'm working with Bootstrap 3 (unfortunately cannot change it to Bootstrap 4) and I need to achieve same-height columns effect like in the picture:
I've succeded to get it working by using position absolute and @media screen for correct size of images and padding (yellow areas), but I believe there's better way to solve it.
I've found nice working code here, but adding picture on top destroys design - picture goes in additional column and streches all the content (here). Adding display:block brings me back to orignal problem - columns of different height.
I'm certain there's some clean and witty way to make it work!
EDIT: So far I have a main row (green frame in the picture below) with 3 columns in it. What if I make 3 rows instead (red frames) and apply equal height only to the middle content? It would work well on big screens, but on small screens when column takes full width of screen, it would end up with 3 pictures one under another, three description parts one under another and three buttons one under another - definitely not what I want! Is there any way to rearrange the display of columns in such case, so I would get 3x picture-description-button?
edit2: snippet added
html,body {
height:100%;
}
.row-flex, .row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex:0;
}
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
width:100%;
}<header>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</header>
<body>
<div class="container"><h3>.row-flex (make columns equal heights in each row)</h3></div>
<div class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-xs-4">
<div class="well">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
</div>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://placehold.it/200x100">
<div class="well">
Duis pharetra varius quam sit amet vulputate.
</div>
</div>
<div class="col-xs-4">
<div class="well">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi.
</div>
</div>
</div><!--/row-->
</div><!--/container-->
<hr>
</body>
495
I think you just need to keep extending the application of flexbox down into the children.
Note however, that images can react badly to being a native flex-child. Wrapping the image in a div solves the issue.
html,
body {
height: 100%;
}
.row-flex {
display: flex; /* columns are now equal height */
}
.col-md-3 {
background: pink;
display: flex;
flex-direction: column;
}
.panel,
.well { /* make panels & wells expand to full height */
flex: 1;
display: flex;
flex-direction: column;
}
.panel-footer { /* push footer to bottom */
margin-top: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-flex">
<div class="col-md-3">
<div class="panel panel-default flex-col">
<div class="panel-heading">Title flex-col</div>
<div class="panel-body flex-grow">Content here -- div with .flex-grow</div>
<div class="panel-footer">Footer</div>
</div>
</div>
<div class="col-md-3">
<div>
<img class="img-responsive" src="http://placehold.it/400x100">
</div>
<div class="well">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit.
</div>
</div>
<div class="col-md-3">
<div class="well">
Duis pharetra varius quam sit amet vulputate.
</div>
</div>
<div class="col-md-3">
<div class="well">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
</div>
</div>
</div>
<!--/row-->
</div>
<!--/container-->Codepen Demo
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
