What tag controls the spacing and where to put it?

Question

My form is marked up using bootstrap. It renders more or less as I intended, but there's no space between the input groups, as illustrated below. The data-binding attributes are knockout syntax, but I don't think they matter one way or the other for the purposes of this question.

<div style="width: 250px;">
  <form class="form-horizontal">
    <div class="input-group input-group-lg">
      <span class="input-group-addon">
        <i class="icon-fixed-width icon-search"></i>
      </span>
      <input class="form-control" placeholder="foo NEAR bar" 
             data-bind="value: predicate, valueUpdate: 'afterkeydown'" />
    </div>
    <div class="input-group input-group-lg">
      <span class="input-group-addon">
        <i class="icon-fixed-width icon-step-backward"></i>
      </span>
      <input class="form-control" type="text" 
             data-bind="datepicker: { value: a, dateFormat: 'd MM yy' }" />
    </div>
      <div class="input-group input-group-lg">
        <span class="input-group-addon">
          <i class="icon-fixed-width icon-step-forward"></i>
        </span>
        <input class="form-control" type="text" 
               data-bind="datepicker: { value: b, dateFormat: 'd MM yy' }" />
      </div>
      <div class="btn-group btn-group-lg pull-right">
        <span class="btn btn-default"><i class="icon-download-alt"></i></span>
        <span class="btn btn-primary"><i class="icon-arrow-right"></i></span>
      </div>
    </form>
  </div>

Here we see the result of the above mark-up.

Rendered form

Bootstrap is pretty comprehensive, so I imagine there are tags for controlling this, but the documentation is a terse run of samples and I haven't found anything similar enough to clue me in.

Often bootstrap is quite cleverly constructed so that a single class applied to (say) the parent div will apply in various ways to all the children. So, what tag do I need and where ought I place it in order to get interstitial spacing for the input groups?

http://stackoverflow.com/questions/10085723/twitter-bootstrap-add-top-space-between-rows — Krish, Apr 30 '14 at 04:07
It's almost but not quite the same question. Write an answer that says Bootstrap does not have a class for this and that a workaround may be found in that question. Then I'll accept it. As it happens I already took the approach of creating and applying my own class, I just figured I was probably duplicating some Bootstrap class. — Peter Wone, Apr 30 '14 at 04:12

davidpauljunior · Accepted Answer · 2014-04-30T04:45:18.360

The class that applies a margin between groups in a form is .form-group. Bootstrap says:

Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

So in your case:

Normal form

<div class="form-group">
    <div class="input-group input-group-lg">
      <span class="input-group-addon">
        <i class="icon-fixed-width icon-search"></i>
      </span>
      <input class="form-control" placeholder="foo NEAR bar" data-bind="value: predicate, valueUpdate: 'afterkeydown'" />
    </div>
  </div>

The only problem here is that you are using .form-horizontal. When you do that, Bootstrap applies a negative left and right margin to the .form-control because it expects you to arrange your fields using .col-xs-4 (or whatever). So I suggest either you don't use that .form-horizontal class in the form, or you add a col-* class to fix the negative margin:

Horizontal form

<div class="form-group">
    <div class="col-xs-12">
      <div class="input-group input-group-lg">
        <span class="input-group-addon">
          <i class="icon-fixed-width icon-search"></i>
        </span>
        <input class="form-control" placeholder="foo NEAR bar" 
               data-bind="value: predicate, valueUpdate: 'afterkeydown'" />
      </div>
    </div>
  </div>

Demo(s)

Just the answer I wanted. I'm accepting it anyway but I hope you'll add a link to the documentation you're quoting. — Peter Wone, Apr 30 '14 at 04:43
Glad to have helped! I just placed the link in (if you click 'Bootstrap says:'). It takes you to Bootstrap forms but it's only a small amount further down the page in a yellow warning box. — davidpauljunior, Apr 30 '14 at 04:46

What tag controls the spacing and where to put it?

1 Answers1