Bootstrap 3.0 - Vertically align 3 panels in the same row (Auto Height)

Question

Trying to have a single row of 3 panels where the height expands according to the content and they all align properly. The left panel would have a graph in it, the two on the r

Answer 1

Nest your grid columns, see: http://getbootstrap.com/css/#grid-nesting

Example: http://bootply.com/79487

html

    


        

                         

                            

                              
Graph
                            
                            

                              
                            
                          
            



        

                

                    

                          

                            

                              
Panel title
                            
                            

                              Panel content
                            
                          
                        
  
                    
  
                          

                            

                              
Panel title
                            
                            

                              Panel content
                            
                          
    
                    
                
  
        
          
    
      

update i forgot the autoheight part for the example above you could use from https://stackoverflow.com/a/12330800/1596547:

$( window ).load(function() {   

boxes = $('.col-sm-6');
maxHeight = Math.max.apply(
Math, boxes.map(function() {
return $(this).height();
}).get());
boxes.height(maxHeight);
$('.col-sm-12 .panel').height(maxHeight/2-22);//22 = 20 (bottom-margin) + 2 *1 (border)
});