Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Creating very large form elements with twitter bootstrap

Creating very large form elements with twitter bootstrap

Problem

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.

Problem courtesy of: Tesla

Solution

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;
}
Solution courtesy of: koala_dev

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Creating very large form elements with twitter bootstrap

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×