0

I have a page that uses Bootstrap 3. I am attempting to fix some issues with the borders. My code looks like the following and a Bootply can be found here.

<div class="container">
  <div class="row">
    <div class="col-md-4" style="border-color:#eee; border-style:solid; border-width:1px 0 1px 1px; min-height:30px;">
    </div>
    <div class="col-md-4" style="border-color:#eee; border-style:solid; border-width:1px 0 1px 1px; min-height:30px;">
      <div>
        <label class="control-label">First Name</label><br>
        <input type="text" title="" class="form-control">
        <p>Please enter your first name</p>
      </div>
    </div>
    <div class="col-md-4" style="border-color:#eee; border-style:solid; border-width:1px 1px 1px 1px; min-height:30px;">
    </div>
  </div>
</div>

I am trying to get a border around each column in the row. No matter what I do, I cannot get the rows to be the same height. What do I need to do to get the columns to be the same height?

Thanks

Jędrzej Chałubek
  • 1,410
  • 1
  • 16
  • 29
Some User
  • 5,257
  • 13
  • 51
  • 93

1 Answers1

0

The min-height property is working as advertised: the issue is that the center column has content that is causing its height to increase more than 30px.

You can use jQuery to fix this:

$(document).ready(function() {
  $(".dep").height($(".main").height());
});

(I added the dep class to the left and right columns and the main class to the center column.)

We are essentially getting the height of the center element and setting the height of the corner elements to that height.

Demo: http://codepen.io/awesomeaniruddh/pen/eNXXBE

Hope that helped :)

Aniruddh Agarwal
  • 257
  • 3
  • 9