Creating very large form elements with twitter bootstrap - html

Question

I want to create a form for my front page that has very big elements, so I'm thinking I just define some custom css classes, but I'm struggling with how exactly I'm meant to scale everything up, eg padding, line height, etc. to match font size.
I'm thinking of having a horizontal form with labels and textboxs and submit button having a text size of 72px.
Is there anywhere I can get more information on how to scale everything accordingly or can anyone give me some tips?
What I was trying is:
input.real-large-input {
font-size: 24px;
padding: 14px 24px;
width:270px;
line-height:46px;
}
label.real-large-label {
font-size: 24px;
line-height:46px;
font-weight:bold;
}
.real-large-btn {
font-size: 24px;
padding: 14px 24px;
}
But the line-height and padding are really just kind of made up, I don't know what values to use to keep it all to scale with the original. Actually quite confused by the original bootstrap CSS as it has something like 14px font-size, padding of 4px for top and bottom, but a line-height of 20px, doesn't add up.
The above works sort of fine at these values, but the issue is I want to scale much larger than this but it all gets really messy as I don't know what values I should be putting for padding and line-height when font-size is 72px.

Answer 1

Bootstrap's inputs have a fixed height, I suggest you set the property to auto to let them scale properly with the font-size you set. Here's a simple demo with a custom class form-large:
http://jsfiddle.net/fpC4r/3/show/
.form-large{
font-size: 60px;
}
.form-large .control-label{
padding-top: 20px;
padding-bottom: 20px;
line-height: normal;
}
.form-large input, .form-large button{
font-size: 60px;
padding: 20px;
height: auto;
line-height: normal;
}