SO equal height columns with wells, Bootstrap 3

by agib

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!--<div class="container">-->
<!-- top row of wells or rounded corner divs -->
<div class="row col-wrap-row">
    <div class="col-sm-4 col">
        <div class="box">
            <div class="row">
                <div class="col-md-3 col-lg-3">
                    <label for="selID" class="control-label">Setting label</label> <span class="help-block">Help text explaning the meaning of the setting.</span>

                </div>
                <div class="col-md-9 col-lg-9">
                    <select name="selectName" id="selID" class="form-control" data-bind="...">
                        <option>Select option 1</option>
                        <option>Select option 2</option>
                        <option>Select option 3</option>
                    </select>
                    <div class="alert alert-info">
                        <table class="table table-plain table-summary table-definition-list">
                            <tbody>
                                <tr>
                                    <td>Select option 1</td>
                                    <td>Explanation</td>
                                </tr>
                                <tr>
                                    <td>Select option 2</td>
                                    <td>Explanation</td>
                                </tr>
                                <tr>
                                    <td>Select option 3</td>
                                    <td>Explanation</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end span 4-->
    <div class="col-sm-4 col">
        <div class="box">
            <p>middle column</p>
        </div>
    </div>
    <!--end span4-->
    <div class="col-sm-4 col">
    ...

CSS

@media (min-width: 768px) {
    /* top row */
    .col .box {
        margin-bottom: -99999px;
        padding-bottom: 99999px;
    }
}
.col-wrap-row {
    overflow: hidden;
}
.box {
    background-color: #227777;
    color: White;
}