Jadon Jadon - 4 months ago 6x
CSS Question

Bootstrap <form> height

I am attempting to have a form on my website using the Bootstrap framework, which is going fine except for the fact that Bootstrap doesn't seem to be calculating the form's height. I have a footer right after my form, in a separate div tag, but when I view the output in my browser, the footer just covers half of the form. It's like Bootstrap doesn't give the form div an automatic height.



**The form is the last element in the wrapper and then the footer is the last of my body. Sorry about the messy CSS, I write messy and then go back and clean it.


I can't post images yet, sorry!!



Your sticky footer is correct. Your bootstrap columns usage is wrong...

Bootstrap uses the container as just a wrapper div to control the width of you content part and also to provide a gutter around your content.

Col-xs-, col-sm- etc., - These are just floating elements with certain widths in percentage. Since these divs are floated, their correct heights will be calculated only when it has a "row" around it.

row - has clearfix ( CSS clear) specified in it. so that col-* height can be calculated

YOU MUST have a row around your columns

<div class="row">
<form class="col-xs-12"></form>

Here is a working fiddle https://jsfiddle.net/davidsekar/qr6gecj9/1/