how do I easily increase the font size of all form elements in twitter's bootstrap css system?

Question

http://twitter.github.com/bootstrap/base-css.html#forms

I have a simple Horizontal form like their example with labels and input text fields. How do I make all the labels font-size: 24px and all the inputs the right height, etc. I also need the harded coded margin of 140px width to increase so the labels don't wrap. That is, I'm looking for the best practice way to say: bigger!

Solution 1

Why not just set form label to 24px and form input height to whatever matches?

form label {
    font-size: 24px;
}

form input, form textarea, form select {
    margin-left: 200px;
}

Just put this code somewhere after the bootstrap.css loads, and it'll override their defaults. You may also want to add selectors for the input type so that it doesn't do buttons.

Solution 2

Twitter's bootstrap uses less for compiling the code but they also allow you to change some of the parameters via UI and download customized version. If those options aren't enough for you, you'd need to set up less and do customization/compiling yourself.

Solution 3

Assuming you have the right setup, create a "filename".css.scss and use compass to watch the file (this will convert it to a css equivalent).

Then in your __.css.scss file, do the following:

1) $baseFontSize: 24px; @import "bootstrap"; This changes size for all fonts but based on your question, I assume this is all you care about.

2) Not sure what you mean by making inputs the right height. But you could use the mixin .box-sizing() (http://twitter.github.com/bootstrap/less.html) or set the bottom height of your input element to match you label like so:

input{position: relative; bottom: 5px;}

3) for the labels to not wrap, put your form in a div with class = "fluid-container spanX" where X is whatever number of grids you need.

Compass will generate a css file from which you can copy the syntax and paste into your project.

Hope this helps

Comments

[Andres Ilich]

Why 24px? thats huge, you'll be breaking the vertical rhythm and visual flow of the bootstrap.

[Andrew Arrow]

this is a consumer site for people 40 years old or older. they like big text!

[tofutim]

are you sure you don't mean 60 or 70? i'm a bit offended being 4x

[Andrew Arrow]

before fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/…

[Andrew Arrow]

after fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/…

[Andrew Arrow]

i think I need more than just your code above but I don't want to re-invent the wheel if there is an easy way to do this.

[ahmet alp balkan]

Before & after are now 404s.