How can I decrease the space between inputs with twitter bootstrap?

Question

I'm using the css form styles from Twitter Bootstrap but I would like to decrease the default spacing between the form input fields. Not sure which css element I need to overwrite.

Any ideas?

Answer 1

If you're working with the default setup you can decrease the .line margin to achieve your goal. Try this:

form .line {
    margin-bottom: 5px; //adjust to your liking
}

This is of course if you're working with an input field separated by the line div that the bootstrap uses, e.g.:

<div class="line">
        <label for="input">Full Name</label>
        <div class="input">
            <input type="text" name="input" size="30">
        </div>
</div>
<div class="line">
        <label for="input">Last Name</label>
        <div class="input">
            <input type="text" name="input" size="30">
        </div>
</div>
...

Demo http://jsfiddle.net/andresilich/qxMVd/1/

Answer 2

When using Bootstrap v2.1 I use their horizontal forms to reduce the height of my forms, I then find altering the .control-group bottom margin can give the desired effect.

Default is 20px I beleive, I use 8px

.form-horizontal .control-group {
    margin-bottom: 8px;
}