What CSS controls the right and left margins between these form elements in Twitter Bootstrap?

Question

I can't figure out what controls the margins between these inline form elements. For example the margin between the two text input fields.

EDIT: I know how to control to alter these margins, but why is there a margin between them AT THE MOMENT. I can't find any CSS in bootstrap that is responsible for these 3 or 4px margins between them at the moment.

Answer 1

The space between the inputs on Bootstrap's documentation is due to white space in the HTML. Remember that .form-group is set to inline block, which is sensitive to white space.

For a demonstration, see http://jsfiddle.net/kvcrawford/Rs54Q/1/

You can fix it with some CSS like the following:

.form-inline-space-fix .form-group {
    margin-right: 4px;
}
.form-inline-space-fix .form-group:last-child {
    margin-right: 0;
}

Answer 2

Here are the CSS selectors you will need..

Margin the inputs/fields:

.form-inline .form-group {
    margin: 0px 10px; /* Add something like this */
}

Margin for the checkbox/radio button:

.form-inline .radio, .form-inline .checkbox {
    margin: 0px 10px; /* Add something like this */
}

Margin for the submit button:

.bs-example > .btn, .bs-example > .btn-group {
    margin: 0px 10px; /* Add something like this */
}

Margin for the entire inline form

.bs-example {
    margin: 0px 30px; /* Add something like this */
}

And to answer your question, there are currently margins between elements, because that is the default. If you wish to remove them, I would suggest doing this manually by adding negative margins to the CSS controls I specified above. For instance, if you wish to remove the margins between the inputs, do this:

.form-inline .form-group {
    margin: 0px -3px; /* Add a negative margin to remove it*/
}