CODEWITHSUNDEEP
csshtmltwitter-bootstrapresponsive-design
Peter Sampras
Peter Sampras

Reputation: 445

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>

Upvotes: 30

Views: 52428

Answers (6)

Richard Jones
Richard Jones

Reputation: 4810

In Bootstrap 3, you can wrap the elements in a div.form-group, like so:

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

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

You can see this in this section of the Bootstrap 3 docs:

https://getbootstrap.com/docs/3.3/css/#forms-inline

Upvotes: 0

kR105
kR105

Reputation: 864

In Bootstrap 4 you have the Spacing utilities.

<div class="row">
    <div class="col-sm-6 mb-lg-2">
        <!-- column-small-50%, margin-bottom-large -->
    </div>
</div>

Upvotes: 1

Matthew Hudson
Matthew Hudson

Reputation: 1316

Here's how I've done it; add minimal spacing to all labels and controls, and use a negative margin on the container to keep everything correctly aligned.

.form-inline {
    margin: 0 -3px;
}

.form-inline .form-group label,
.form-inline .form-group input,
.form-inline .form-group select {
    margin: 0 3px;
}

Upvotes: 1

Scott
Scott

Reputation: 706

I had the same question as the OP - he is asking about spacing things out horizontally - BS smashes things together pretty well as seen here. Here's my solution:

.form-inline label {
    margin-left: 5px;
}

Upvotes: 3

DaniP
DaniP

Reputation: 38262

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.

Upvotes: 38

meavo
meavo

Reputation: 1042

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>

Upvotes: 6

Related Questions