CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3flexboxdisplay
oboer
oboer

Reputation: 169

Equal height columns with Bootstrap 3 and flexbox

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: enter image description here 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?

enter image description here

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>

Upvotes: 4

Views: 18275

Answers (2)

Paulie_D
Paulie_D

Reputation: 115342

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

Upvotes: 8

user6879896
user6879896

Reputation:

There's no other way to make it same height in CSS. I mean dynamic (without setting a specific height).

If you change the display flex to display block. It won't work.

Option: Javascript. Get the height of 3 flex-children and compare it using Math.max(); Set the return number to flex-children.

* {
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.flex-children {
  width: 30%;
  background: red;
}
<div class="flex">
  <div class="flex-children">asd</div>
  <div class="flex-children">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora et nisi harum eaque quas similique esse voluptas? Expedita in vitae, vel unde deleniti hic dolores rerum. Aliquam quos quidem quae.</p>
  </div>
  <div class="flex-children">ddey</div>
</div>

Just override bootstrap style for the specific content.

Upvotes: 2

Related Questions