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;
}

Do you know the height in pixels of each column? – DavidG Feb 02 '15 at 10:56 — DavidG, Feb 02 '15 at 10:56
try to use the display:flex property. – anji Feb 02 '15 at 10:57 — anji, Feb 02 '15 at 10:57
look at here : http://stackoverflow.com/q/19695784/2454790 – BENARD Patrick Feb 02 '15 at 11:09 — BENARD Patrick, Feb 02 '15 at 11:09

score 3 · Answer 1 · answered Feb 02 '15 at 15:25

3

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

answered Feb 02 '15 at 15:25

Carol Skelly

351,302
90
710
624

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. – Suhaib Janjua Feb 02 '15 at 16:01

score 2 · Accepted Answer · answered Feb 02 '15 at 13:04

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.

answered Feb 02 '15 at 13:04

Suhaib Janjua

3,538
16
59
73

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? – Elisabeth Feb 02 '15 at 13:39
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 Feb 02 '15 at 13:44
Alternatively you can apply fixed width and height to your tiles if you want non-responsive layout regardless of the displaying window size. – Suhaib Janjua Feb 02 '15 at 13:46
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: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height – Elisabeth Feb 02 '15 at 13:59
I have used the solution that you pasted above and it looks like [this.](http://jsbin.com/xiyoxu/5/) – Suhaib Janjua Feb 02 '15 at 15:32

score -1 · Answer 3 · answered Feb 02 '15 at 11:19

-1

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

answered Feb 02 '15 at 11:19

Pattle

5,983
8
33
56

Are there no any bootstrap internal classes to achieve such a layout? – Elisabeth Feb 02 '15 at 11:22
@Elisa Not that I'm aware of – Pattle Feb 02 '15 at 11:23
http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height I tried those bootstrap classes but could not get it working. – Elisabeth Feb 02 '15 at 11:29

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

3 Answers3