CODEWITHSUNDEEP
csstwitter-bootstrap-3flexbox
Craig Curtis
Craig Curtis

Reputation: 863

Is it possible for columns to wrap and be all the same height using Bootstrap 3?

Using Bootstrap 3, is it possible to have columns wrap and be the same height as the largest column in the row?

I know it's possible to force columns to be all of the same height in the same row using flexbox, but is it possible to have the same column heights when the columns wrap?

.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

div[class*='col-'] {
    background-color: #eaeaea;
    border: 1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row display-flex">
    <div class="col-md-6">
        ShouldBeSameHeightAsMultiLineColumn
    </div>

    <div class="col-md-6">
        Multi line content that will wrap to the next line. Multi line content that will wrap to the next line. Multi line content that will wrap to the next line. 
    </div>

    <div class="col-md-6">
        ShouldBeSameHeightAsMultiLineColumn
    </div>

    <div class="col-md-6">
        ShouldBeSameHeightAsMultiLineColumn
    </div>
</div>

Upvotes: 2

Views: 219

Answers (1)

Jared Chu
Jared Chu

Reputation: 2862

In this case I will use jQuery.

$(document).ready(function(){
  var biggestHeight = 0;
  var flexColumns = $('.display-flex > div');
  flexColumns.each(function(){
    if($(this).height() > biggestHeight){
      biggestHeight = $(this).height();
    }
  });
  flexColumns.height(biggestHeight);
});
.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

div[class*='col-'] {
    background-color: #eaeaea;
    border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row display-flex">
    <div class="col-md-6">
        ShouldBeSameHeightAsMultiLineColumn
    </div>

    <div class="col-md-6">
        Multi line content that will wrap to the next line. Multi line content that will wrap to the next line. Multi line content that will wrap to the next line. 
    </div>

    <div class="col-md-6">
        ShouldBeSameHeightAsMultiLineColumn
    </div>

    <div class="col-md-6">
        ShouldBeSameHeightAsMultiLineColumn
    </div>
</div>

Upvotes: 2

Related Questions