Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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> 
like image 523
Peter Sampras Avatar asked Nov 13 '13 19:11

Peter Sampras


People also ask

How do I change the width of a form control in bootstrap?

For default size . form-control is used, for smaller size we can use . form-control class along with . form-control-sm and for larger size we can use .

What is padding in bootstrap?

The bootstrap padding is one of the essential utilities to make space between content and container. This is a designing component to make space inside of the container or border using bootstrap class. This is an advance utility to modify the elements and their container using space and space size properties.


2 Answers

Here is an example of using the Bootstrap Grid system. You could apply a bunch of classes to handle the different viewports.

<form class="form-inline" role="form">   <div class="form-group row">     <div class="col-md-6">       <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>     <div class="col-md-3"">       <label class="radio-inline">         <input id="timeformat-0" name="timeformat" value="24" type="radio" />         19:00       </label>     </div>     <div class="col-md-3">       <label class="radio-inline">         <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />         7:00 PM       </label>     </div>     <button class="btn" type="submit">Save</button>   </div> </form> 
like image 30
meavo Avatar answered Sep 21 '22 00:09

meavo


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.

like image 142
DaniP Avatar answered Sep 22 '22 00:09

DaniP