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

css html twitter-bootstrap css-frameworks
Andrew Arrow picture Andrew Arrow · Apr 2, 2012 · Viewed 28.2k times · Source

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!

Answer

Jordan picture Jordan · Apr 2, 2012

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.

Related questions

vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More
Text-align class for inside a table

Is there a set of classes in Twitter's Bootstrap framework that aligns text? For example, I have some tables with $ totals that I want aligned to the right... <th class="align-right">Total</th> and <td …

Read More
Bootstrap NavBar with left, center or right aligned items

In Bootstrap, what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right? Here is what I've tried so far, and it …

Read More