How to easily increase the font size of all form elements in twitter bootstrap css system?

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

I have a simple horizontal form similar to their example with labels and text input fields. How to make all labels font size: 24px and all inputs with correct height etc. I also need the 140px extended coded margin to grow so the labels don't wrap. That is, I'm looking for a better way to say more!

+3


source to share


3 answers


Twitter bootstrap uses less to compile the code, but they also allow you to change some settings via the UI and load the customized version. If these options are not enough for you, you will need to tweak less and do the tweak / compile yourself.



+2


source


Assuming you have the correct setup, create "filename" .css.scss and use a compass to view the file (this converts it to the css equivalent).

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

1)    $baseFontSize: 24px; @import "bootstrap";

This resizes for all fonts, but based on your question, I suppose that's all you care about.

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



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

      

3) to prevent the labels from wrapping, place your shape in a div with class = "fluid-container spanX", where X is any number of grids you need.

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

Hope it helps

+2


source


Why not just set the form label to 24px and shape the input height for any matches?

form label {
    font-size: 24px;
}

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

      

Just put this code somewhere after bootstrap.css is loaded and it will override their defaults. You can also add a selector for the input type so that it doesn't execute buttons.

+1


source







All Articles