0

I need to make my bootstrap column span the full height of a row. The issue i am having is that I cannot get it to change size.

currently my HTML looks like this

<div class="container">
    <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-11">
         <!-- Content removed for demo | large form here -->
        </div>
    </div>
</div>

The col-sm-11 contains a form which is x height (around 400/500px)

the col-sm-1 contains no content but I want to make it 100% height so it matches the form next to it. How do I go about doing this

Attempts

I have tried applying height 100% to that column but it remains the same.

I have also tried setting a static amount like 300px but this just pushes the form down. and i need it to be 100% anyway

m4n0
  • 29,823
  • 27
  • 76
  • 89
Kieranmv95
  • 828
  • 4
  • 14
  • 31
  • Post the code with content inside i.e. the form element. – m4n0 Sep 22 '15 at 15:23
  • it adds way to much code its a very large form, also it doesn't matter about the form it does the same whether its a form or multiple h1's for example – Kieranmv95 Sep 22 '15 at 15:24
  • Possible duplicate - http://stackoverflow.com/questions/31703334/bootstrap-equal-height-colums – Paulie_D Sep 22 '15 at 15:25
  • or this - http://stackoverflow.com/questions/19089384/twitter-bootstrap-3-two-columns-full-height?rq=1 – Paulie_D Sep 22 '15 at 15:26
  • the row row-eq-height doesnt appear to be making any difference to my code :S – Kieranmv95 Sep 22 '15 at 15:30
  • @Kieranmv95 try the solution here http://stackoverflow.com/questions/32629477/bootstrap-3-panel-100-height-inside-column/32630031#32630031 – Shehary Sep 22 '15 at 15:47

1 Answers1

1

The easiest way I can think of for you to do this is to use one line of jQuery, if possible.

Add a class, two separate ones, to each of your two columns.

<div class="col-sm-1 col1">
</div>
<div class="col-sm-11 col2">
</div>

In jQuery, simply add this line of code at the top of your $(document).ready(function() {...});

$('.col1').height($('.col2').height());

Here is a JSFiddle

Note: I made your col-sm's col-xs's so that you could see it in JSFiddle without resizing.

Note #2: You may want to put the line of jQuery inside of a $(window).resize(function() {...}); so that it changes with the responsiveness.

Tricky12
  • 6,752
  • 1
  • 27
  • 35