CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3
murday1983
murday1983

Reputation: 4016

Vertical align 3 "panel panel-default" so they are all the same height

I have a row and in that row I have 3 parts which all are using the same code to generate but I can not keep them the same height. I am using HTML 5 and also using Bootstrap 3. on the "panel panel-default" I have tried using a "min-height" but when I add link to one of the sections, it only expands that section.

It's a little hard for me to explain.

my view is:

<div class="col-sm-4">
    <div class="form-group">
        <div class="panel panel-default" style="min-height: 540px">
            <div class="panel-heading">
                <h3 class="panel-title"><%=title %></h3>
            </div>
            <div class="panel-body">
                <div class="form-horizontal"><%=template.ToString() %></div>
            </div>
        </div>
    </div>
</div>

Which makes the page look like:

Which makes the page look like:

Now as each column is using the same code how can I keep each one in-line so if a new link was added/removed to one the first. each panel border runs inline.

At the present I have a min-height set but the screenshot below shows this doesn't work when a new link is added.

I would like to do it without the use of CSS or Java/JQuery.

Upvotes: 1

Views: 698

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362610

I think what you're looking for is something like this..

http://www.bootply.com/iH9uUHI4Zs

.flex, .flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 0 auto;
}

It uses CSS flexbox to make the height of the columns in a row the height of the tallest.

Upvotes: 1

Related Questions