Peter Sampras Peter Sampras - 5 months ago 14
CSS Question

Twitter Bootstrap inline form spacing

Here is a JSFiddle showing my code in action.

I want to add a few pixels of spacing between the different parts of the form in the most correct way using Twitter Bootstrap 3 taking responsiveness into consideration. I've looked over the documentation, but it still isn't clear to me what the best way to accomplish this is.

Any ideas?

Here is my current form HTML:

<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="timezone">Timezone</label>
<select class="form-control" id="timezone" name="timezone">
<option value="America/St_Lucia">America/St_Lucia</option>
<option value="Europe/Nicosia">Europe/Nicosia</option>
</select>
</div>

<label class="radio-inline">
<input id="timeformat-0" name="timeformat" value="24" type="radio" />
19:00
</label>

<label class="radio-inline">
<input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
7:00 PM
</label>

<button class="btn" type="submit">Save</button>
</form>

Answer

You can try with margin to all direct childrens of .form-inline:

.form-inline > * {
   margin:5px 3px;
}

View this fiddle http://jsfiddle.net/MFKBj/10/

PD: I only add !important in the fiddle to make me sure it's over the bootstrap CSS you don't need this.