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 right would have tables that work with the graph on the left.

Example of this working is this template: Click Here For Example

<div class="row">
    <div class="col-md-8">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">Panel content
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">Panel content
            </div>
        </div>
    </div>
</div>

Wow, that linked resource is the AdiminLTE Panel, where did that come from with another name on it? Just wanted to throw that out there. — blamb, Oct 12 '17 at 20:06

score 15 · Answer 1 · edited May 23 '17 at 12:02

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

Example: http://bootply.com/79487

html

<div class="container">
    <div class="row">

        <div class="col-sm-6">
                         <div class="panel panel-success">
                            <div class="panel-heading">
                              <h3 class="panel-title">Graph</h3>
                            </div>
                            <div class="panel-body">
                              <img src="http://dummyimage.com/600x500/000/fff&amp;text=Graph" class="img-responsive">
                            </div>
                          </div>
            </div>



        <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-12">
                          <div class="panel panel-primary">
                            <div class="panel-heading">
                              <h3 class="panel-title">Panel title</h3>
                            </div>
                            <div class="panel-body">
                              Panel content
                            </div>
                          </div>
                        </div>  
                    <div class="col-sm-12">  
                          <div class="panel panel-success">
                            <div class="panel-heading">
                              <h3 class="panel-title">Panel title</h3>
                            </div>
                            <div class="panel-body">
                              Panel content
                            </div>
                          </div>    
                    </div>
                </div>  
        </div>          
    </div>      
</div>

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

I understand that part, but I need all of them to be the same height regardless of the content inside of them. See the example where all the panels are the same height across the row. Thanks – — Robert Wojtow, Sep 06 '13 at 21:25
sorry i forgot the auto height part, see http://stackoverflow.com/questions/10771713/twitter-bootstrap-same-heights-on-fluid-columns — Bass Jobsen, Sep 06 '13 at 21:28

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

1 Answers1

Linked