How can I make fixed height panels in bootstrap?

Question

This is the image I want:

How can I make a fixed bootstrap panel height for all my panels?

 <div class="col-md-3 padding-0"> <div class="panel panel-default"> <div class="panel-body" style="min-height: 10px; max-height: 10px;"> <img class="img-responsive" src="images/artgram.png" alt=""> <p>Have you ever been in a company's reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better? Have you ever been in a company's reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better?</p> </div> </div> </div> <div class="col-md-3 padding-0"> <div class="panel panel-default"> <div class="panel-body" style="min-height: 10px; max-height: 10px;"> <img class="img-responsive" src="images/artgram.png" alt=""> <p>Have you ever been in a company's reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better?</p> </div> </div> </div> 

Answer 1

Either use fixed height with hidden overflow

.panel-body {
    height: 100px;    // or whatever
    overflow: hidden;
}

or assign max rendered height to all panels dynamically using JS after load. See my answer for a quite similar question here . The snippet is copied below

 var panels = document.getElementsByClassName('panel-body'); var maxHeight = Array.prototype.map.call(panels, function(panel) { return parseInt(getComputedStyle(panel).height, 10); }) .reduce(function(a, b) { return Math.max(a, b); }); for (var i = panels.length; i-- > 0;) { panels[i].style.height = maxHeight + 'px'; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading">Panel Heading</div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> <div class="panel-footer">Panel Footer</div> </div> </div> <div class="col-md-6"> <div class="panel panel-default col"> <div class="panel-heading">Panel Heading</div> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> <div class="panel-footer">Panel Footer</div> </div> </div> </div>