Geek Answers Handbook

Same column height for all columns in row with bootstrap 3

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

I have 3 rows with three columns.

How can I give each row or all 3 columns the same fixed height so that 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;
}
+4
source share
3 answers

Here is a working Fiddle.

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

panel height css, .

css , 'css' .

+2

, panel CSS flexbox. 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%;
}

: http://bootply.com/yTIGMotDkp

+1

. height

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

However, this does not work very well if the content is dynamic, because if the length exceeds 150 pixels, it will be hidden, or you will get a scroll depending on your CSS rules. You can use min-heightone that will work better, but not perfect.

Alternatively you can apply display: flexto your containerrow

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

Here is a working example of this

-1
source

More articles:


All Articles