Equal Height for Bootstrap column boxes

Question

I'm trying to make the height of my two backgrounds the same. I don't want the height being set by the content inside. Here is my code below. Currently as the code is written, the two containers are uneven. How can I make the same exact same height?

<!-- Consultation -->
<div id="consultation">
    <div class="container">
        <h1><strong>ASK US</strong></h1>
        <hr>

        <div class="row">
            <div class="col-md-6">
                <div class="con-padded">
                <form name="contactform" method="post" action="index.php"                     class="form-vertical" role="form">
                    <div class="form-group">
                        <label for="inputName" class="control-  label">Name</label>
                            <input type="text" class="form-control input-md"    id="inputName" name="inputName" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail1" class="control-label">Email</label>
                            <input type="text" class="form-control input-md" id="inputEmail" name="inputEmail" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="inputSubject" class="control-label">Subject</label>
                            <input type="text" class="form-control input-md" id="inputSubject" name="inputSubject" placeholder="Subject">
                    </div>
                </div>
            </div> <!-- end col-md-6 -->

            <div class="col-md-6">
                <div class="con-padded">
                    <div class="form-group">
                        <label for="inputPassword1" class="control-label">Details</label>
                        <textarea class="form-control" rows="5" id="inputMessage" name="inputMessage" placeholder="Message..."></textarea>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default pull-right">
                            Send
                        </button>
                    </div>
                </form>
                </div>
            </div> <!-- end col-md-6 -->

        </div> <!-- end row -->
    </div> <!-- end container-fluid -->
</div> <!-- end consultation -->

Here is my CSS

 #consultation {
 background: url('../img/summit.jpg') no-repeat center center fixed;
 background-size: 100% auto;
 color: #FCFFF5; /*white*/

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

padding-top: 30px;
}

#consultation h1 {
color: #282828;
text-align: center;
}

#consultation .col-md-6 {
padding-left: 60px;
padding-right: 60px;
padding-bottom: 20px;
margin: 0 auto;
}

.con-padded {
background-color: #282828; /*black*/
border-radius: 18px;
padding-top: 40px;
padding-bottom: 60px;
padding-left: 35px;
padding-right: 35px;

opacity: 0.93;
-webkit-opacity: 0.93;
-moz-opacity: 0.93;
}

bootstap col height is set to auto; so if you want to limit its height equal for all `col` use custom css — Gautam Jha, Feb 15 '16 at 05:57

score 1 · Accepted Answer · answered Feb 15 '16 at 06:08

1

You can alternatively add this statement to your .con-padded class

height:200px;

Which will set the height of both.

answered Feb 15 '16 at 06:08

Steve Hartley

715
5
10

score 0 · Answer 2 · answered Feb 15 '16 at 06:02

Just use this inline css with any element to set its height. style="height:200px"

i hope its help you

#consultation {
 background: url('../img/summit.jpg') no-repeat center center fixed;
 background-size: 100% auto;
 color: #FCFFF5; /*white*/

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

padding-top: 30px;
}

#consultation h1 {
color: #282828;
text-align: center;
}

#consultation .col-md-6 {
padding-left: 60px;
padding-right: 60px;
padding-bottom: 20px;
margin: 0 auto;
}

.con-padded {
background-color: #282828; /*black*/
border-radius: 18px;
padding-top: 40px;
padding-bottom: 60px;
padding-left: 35px;
padding-right: 35px;

opacity: 0.93;
-webkit-opacity: 0.93;
-moz-opacity: 0.93;
}

<div class="col-sm-6" style="height:200px">
<div class="con-padded">
                <form name="contactform" method="post" action="index.php"                     class="form-vertical" role="form">
                    <div class="form-group">
                        <label for="inputName" class="control-  label">Name</label>
                            <input type="text" class="form-control input-md"    id="inputName" name="inputName" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail1" class="control-label">Email</label>
                            <input type="text" class="form-control input-md" id="inputEmail" name="inputEmail" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="inputSubject" class="control-label">Subject</label>
                            <input type="text" class="form-control input-md" id="inputSubject" name="inputSubject" placeholder="Subject">
                    </div>
                </div>
            </div> <!-- end col-md-6 -->

            <div class="col-sm-6" style="height:200px">
                <div class="con-padded">
                    <div class="form-group">
                        <label for="inputPassword1" class="control-label">Details</label>
                        <textarea class="form-control" rows="5" id="inputMessage" name="inputMessage" placeholder="Message..."></textarea>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default pull-right">
                            Send
                        </button>
                    </div>
                </form>
                </div>
            </div> <!-- end col-md-6 -->

        </div> <!-- end row -->
    </div> <!-- end container-fluid -->
</div> <!-- end consultation -->

Bhushana Rao Kadimi · Answer 3 · 2016-02-15T08:45:10.970

0

Give same class name (equalHight) to both column and add this code
i hope its help you

heights = $(".equalHight").map(function() {
                return $(this).height();
            }).get(),
            maxHeight = Math.max.apply(null, heights);
            $(".equalHight").height(maxHeight);

Note: main use this code is, set height to all which one is highest (having same class name)

edited Feb 15 '16 at 08:45

answered Feb 15 '16 at 06:16

Bhushana Rao Kadimi

37
3

No need to applay any CSS – Bhushana Rao Kadimi Feb 15 '16 at 12:01

Equal Height for Bootstrap column boxes

3 Answers3