Same fixed column height for all columns in a row with bootstrap 3

Question

My codepen: http://codepen.io/helloworld/pen/razoxg?editors=110

I have 3 rows with each 3 columns.

How can I give each row or all 3 columns the same fixed height so one tile is not larger than the other?

<div class="container-fluid">
 <!-- Page Header -->
 <div class="row">
 <div class="col-lg-12">
 <h1 class="page-header">Electronics 
 </h1>
 </div>
 </div>
 <!-- /.row -->
 <!-- 1st Row -->
 <div class="row"> 
 <div class="col-xs-4">
 <div class="panel industry-tile-medium">
 <div class="panel-body">
 <header>Customer</header>
 </div>
 <div class="panel-footer">
 <div class="row">
 <div class="col-xs-6">
 <img class="img-responsive" src="http://s16.postimg.org/tqs90puwl/customer.png"></img>
 </div>
 <div class="col-xs-6 col-bottom">
 <ul class="list-group">
 <li class="list-group-item ">Intel</li>
 <li class="list-group-item ">Micron</li>
 <li class="list-group-item ">Infineon</li> 
 <li class="list-group-item ">First Solar</li> 
 </ul>
 </div>
 </div>
 </div>
 </div>
 <!-- /.panel -->
 </div>
 <div class="col-xs-4"> 
 <div class="panel special-tile">
 <div class="panel-body special-tile"> 
 </div>
 <div class="panel-footer special-tile">
 <div class="row">
 <div class="col-xs-3">
 <img class="img-responsive" src="http://s7.postimg.org/agarkavmj/whoiswho.png"></img> 
 </div>
 <div class="col-xs-9" >
 <div class="row">
 <div id="page-header" class="page-header">
 <h4>Who is who
 <p>
 <small>Organization & Processes</small>
 </p>
 </h4> 
 </div>
 </div>
 <div class="row">
 <div class="col-xs-12">
 <ul class="list-group">
 <li class="list-group-item ">Org Charts </li>
 <li class="list-group-item ">GAM / KAM Charts</li>
 <li class="list-group-item ">Process flow</li> 
 </ul>
 </div>
 </div>
 </div> 
 </div> 
 </div>
 </div>
 <!-- /.panel -->
 </div>
 <!-- /.col -->
 <div class="col-xs-4">
 <div class="panel industry-tile-medium">
 <div class="panel-body">
 <header>CEO Blog</header>
 </div>
 <div class="panel-footer">
 <div class="row">
 <div class="col-xs-3">
 <i style="color:orange;" class="fa fa-rss-square fa-5x"></i>
 </div> 
 <div class="col-xs-9">
 Lorem ipsum dolor sit amet, consetetur sadipscetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
 </div> 
 </div> 
 </div>
 </div>
 <!-- /.panel -->
 </div>
 <!-- column -->
 </div>
 <!-- /.row -->
 <!-- 2nd Row -->
 <div class="row">
 <div class="col-xs-4">
 <div class="panel industry-tile-medium">
 <div class="panel-body">
 <header>On-going Projects & Webcam</header>
 </div>
 <div class="panel-footer">
 <div class="row">
 <div class="col-xs-6">
 <img class="img-responsive" src="http://s16.postimg.org/tqs90puwl/customer.png"></img>
 </div>
 <div class="col-xs-6 col-bottom">
 <ul class="list-group">
 <li class="list-group-item ">GF Project Malta</li>
 <li class="list-group-item ">Intel Israel</li> 
 </ul>
 </div>
 </div>
 </div>
 </div>
 <!-- /.panel -->
 </div>
 <!-- /.col -->
 <div class="col-xs-4">
 <div class="panel personal-tile-medium">
 <div class="panel-body">
 <header> Personal Links </header>
 </div>
 <div class="panel-footer">
 <div class="row">
 <div class="col-xs-12">
 <ul class="list-group">
 <li class="list-group-item ">Org Charts</li>
 <li class="list-group-item ">GAM / KAM Charts</li>
 <li class="list-group-item ">Process flow</li> 
 </ul>
 </div> 
 </div> 
 </div>
 </div>
 <!-- /.panel -->
 </div>
 <div class="col-xs-4">
 <div class="row half-tile half-tile-top">
 <div class="col-xs-6">
 <img class="img-responsive" src="http://s16.postimg.org/tqs90puwl/customer.png"></img>
 </div>
 <div class="col-xs-6">
 Presentations
 </div>
 </div>
 <!-- ./row -->
 <div class="row half-tile">
 <div class="col-xs-6">
 <img class="img-responsive" src="http://s16.postimg.org/tqs90puwl/customer.png"></img>
 </div>
 <div class="col-xs-6">
 Events, Trade Shows & Conferences
 </div>
 </div>
 <!-- ./row -->
 </div>
 </div>
 <!-- 3rd Row -->
 <div class="row">
 <div class="col-xs-4 portfolio-item">
 <div class="panel industry-tile-medium">
 <div class="panel-body">
 <header>Project Library and References</header>
 </div>
 <div class="panel-footer">
 <div class="row">
 <div class="col-xs-6">
 <img class="img-responsive" src="http://s1.postimg.org/go41exp63/Reports.png"></img>
 </div>
 <div class="col-xs-6">
 <ul class="list-group">
 <li class="list-group-item">GF Project Malta</li>
 <li class="list-group-item">Intel Israel</li>
 </ul>
 </div> 
 </div> 
 </div>
 </div>
 <!-- /.panel -->
 </div>
 <div class="col-xs-4">
 <div class="panel branch-tile-medium">
 <div class="panel-body">
 <header>Industry Links</header>
 </div>
 <div class="panel-footer">
 <div class="row">
 <div class="col-xs-12">
 <ul class="list-group">
 <li class="list-group-item"> <a href="#">www.semi.org</a></li>
 <li class="list-group-item"><a href="#">www.vdma.org</a></li>
 <li class="list-group-item"><a href="#">www.visi.org</a></li> 
 </ul>
 </div> 
 </div> 
 </div>
 </div>
 <!-- /.panel -->
 </div>
 <div class="col-xs-4 portfolio-item">
 <div class="panel branch-tile-medium">
 <div class="panel-body">
 <header>Competition</header>
 </div>
 <div class="panel-footer">
 <div class="row">
 <div class="col-xs-12">
 <ul class="list-group">
 <li class="list-group-item"> <a href="#">CH2MHill</a></li>
 <li class="list-group-item"><a href="#">Bechtel</a></li>
 <li class="list-group-item"><a href="#">Jacobs Engineering</a></li> 
 </ul>
 </div> 
 </div> 
 </div>
 </div>
 <!-- /.panel -->
 </div>
 </div>
 <!-- /.row -->
 <hr>
 <!-- News -->
 <div class="row">
 <!-- Electronic news -->
 <div class="col-xs-6">
 <div class="panel industry-tile-medium">
 <div class="panel-body">
 <header>Electronic News</header>
 </div>
 <div class="panel-footer">
 <div class="row">
 <div>
 <ul>
 <li>05-Dec ATF in-house news channel</li>
 <li>06-Dec ATF in-house news channel</li>
 <li>07-Dec ATF in-house news channel</li>
 </ul> 
 </div> 
 </div> 
 </div>
 </div>
 <!-- /.panel --> 
 </div>
 <!-- Industry News -->
 <div class="col-xs-6">
 <div class="panel branch-tile-medium">
 <div class="panel-body">
 <header>Industry News</header>
 </div>
 <div class="panel-footer">
 <div class="row">
 <div>
 <ul>
 <li>05-Dec links to global news</li>
 <li>06-Dec links to global news</li>
 <li>07-Dec links to global news</li>
 </ul> 
 </div> 
 </div> 
 </div>
 </div>
 <!-- /.panel --> 
 </div>
 </div>
 <!-- /.row -->
 <hr>
 <!-- Copyright -->
 <footer>
 <div class="row">
 <div class="col-lg-12">
 <p>Copyright &copy; XXX</p>
 </div>
 </div>
 <!-- /.row -->
 </footer>
</div>

* {
 Box-sizing: Border-box;
 border-radius: 0 !important; /* Remove rounded borders from whole layout */
}
.special-tile{
 background:#006AB3; 
}
.special-tile h4, .special-tile small, .special-tile {
 color:white;
}
.special-tile .panel-body{
 padding:0;
}
.special-tile .panel-footer{
 border:0;
}
.half-tile{ 
 background:#006AB3;
 color:white;
}
.half-tile-top{
 margin-bottom:10px;
}
.industry-tile-medium{
 background: #006AB3;
 border: 1px solid #006AB3;
}
.industry-tile-medium .panel-footer{
 background: #F0F8FF;
 color:#006AB3;
} 
.branch-tile-medium{
 background: #006B66;
 border: 1px solid #006B66;;
}
.branch-tile-medium .panel-footer{
 background: #EFFDFC; 
} 
.branch-tile-medium .panel-footer a{
 color: #006B66;
}
.personal-tile-medium{
 background: #5E9629;
 border: 1px solid #5E9629;
}
.personal-tile-medium .panel-footer{
 background: #F2FEE7;
 color: #5E9629;
} 
ul
{
 list-style-type:none;
}
ul li a{
 text-decoration:underline;
}
.panel .panel-body header
{
 color:white;
 font-weight:bold;
 font-size:1.2em;
}
.list-group-item {
 background:transparent;
 padding:5px 5px;
}
.panel-body{
 padding:6px;
}

• DavidG: Do you know the height in pixels of each column?
• anji: try to use the display:flex property.
• BENARD Patrick: look at here : stackoverflow.com/q/19695784/2454790

Answer 1

If the height of the panels is unknown, or you don't want to set a min height, you can have each panel assume the height of the tallest panel in each row using CSS flexbox. Just add this CSS..

.row, .row > div[class*='col-'] { 
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex:1 0 auto;
}
 
.panel {
 width:100%;
}

Demo: http://bootply.com/yTIGMotDkp

• Suhaib Janjua: 3rd column in 2nd row is stretched and content is half of the content is not visible. All the images are stretched and the content is not aligned inside the column divs.

Answer 2

Here is a working Fiddle.

While using bootstrap, you need to always need to make some changes according to your need. You can override the bootstrap style by applying your own styles through classes to DOM elements.

You need to define panel height in your css so that your tiles will get the same height.

As you have already written a lot of css in your page, so I use all or your 'css' and made some changes in it.

• Elisabeth: if you decrease the window size the 1th row and 2nd column - the blue one - is higher than the other columns. Why does your fix not work for this one?
• Suhaib Janjua: Do you want a responsive layout with window size? If so then you will need to implement some @media queries in your css to stack your columns on one another when windows size decreases.
• Suhaib Janjua: Alternatively you can apply fixed width and height to your tiles if you want non-responsive layout regardless of the displaying window size.
• Elisabeth: I wait for the customers feedback. But doing a non-responsive layout - sth like that my boss suggest for a first mockup - is not very modern... where everyone runs a tablet etc... Thus your solution comes nearest to what I want. Maybe I give this one a try again: minimit.com/articles/solutions-tutorials/…
• Suhaib Janjua: I have used the solution that you pasted above and it looks like this.

Answer 3

There are a number of ways you can do this. You could apply a height to your columns

.col-xs-4 {
 height: 150px;
}

However this wont' work very well if the content is dynamic because if the length exceeds 150px it will be hidden or you'll get scrolling depending on your CSS rules. You could use min-height which will work better but not ideal.

Alternatively you could apply display: flex to your row container element

.row {
 display: flex;`
 ....
}

Here is a working example of that

• Elisabeth: Are there no any bootstrap internal classes to achieve such a layout?
• Pattle: @Elisa Not that I'm aware of
• Elisabeth: minimit.com/demos/bootstrap-3-responsive-columns-of-same-height I tried those bootstrap classes but could not get it working.