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

Question

I cannot understand what controls the fields between these inline form elements. For example, a field between two text input fields.

EDIT: I know how to control to change these fields, but why is there a difference between them AT THE TIME. I cannot find CSS in the bootstrap that is responsible for these 3 or 4px fields between them at the moment.

Answer 1

Here is the CSS selector you'll need.

Input Fields / Fields :

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

Fields for checkbox / radio button :

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

Margin for submit button:

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

Margin for the entire embedded form

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

And to answer your question, there are currently fields between the elements since this is the default value. If you want to remove them, I would suggest doing it manually by adding negative fields to the CSS controls mentioned above. For example, if you want to remove fields between inputs, do the following:

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

Answer 2

The space between the inputs in the Bootstrap documentation is associated with a space in the HTML. Remember that .form-group installed in an inline block that is .form-group sensitive.

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

You can fix this with some CSS, for example:

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

Answer 3

View HTML code required for a form

 <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox">Remember me</label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form> 

for example, to add more fields after input fields, you can:

 form.form-inline div.form-group { margin-right: 10px; } 

Similarly, you can do the same trick for other elements (for example, for the form.form-inline div.checkbox , for the form.form-inline button submit form.form-inline button )

Answer 4

I understand what you are confused about. You want to know why there is a gap between the two input fields.

To do this, the answer actually lies with the parent class of the form bs-example form-inline . There, if you check the use of firebug or chromes chromebug, you will see this style: .bs-example {margin: 0 -15px 15px;} . Now this is the part that controls the space between two separate input fields. If you block it using a fire error or a chrome error, you will see that the fields are actually one below the other, and this is a field with vertical-align positioning that keeps them both in place.