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

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

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.