title: No space between the elements in inline form bootstrap (dynamic form)
body: <p>I have a dynamic form with multiple fields in bootstrap and when I add a new form, it is not aligned with the first one. I appreciate if you can let me know how I can make the space between the inline elements. </p>
  
  <p><a href="https://i.stack.imgur.com/IfFiF.png" rel="nofollow noreferrer">image of the form</a></p>
  
  <p>html:</p>
  
  <pre><code>  &lt;div class="row" id="dynamic_form"&gt;
      &lt;div class="form-group form-horizontal"&gt;
      &lt;label class="control-label"&gt;Primitives&lt;/label&gt;
        &lt;div class="form-inline"&gt;
          &lt;select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]"&gt;
            &lt;option value=" " disabled selected&gt;primitive&lt;/option&gt;
            &lt;option value="sphere"&gt;sphere&lt;/option&gt;
            &lt;option value="triangle"&gt;triangle&lt;/option&gt;
          &lt;/select&gt;
          &lt;input type="number" class="input-small form-control" id="diameter"  name="Diameter[]" step="any" placeholder="diameter(D)"&gt;
  
          &lt;input type="text" class="input-small form-control"  id="sphere-position" name="SpherePosition[]"  placeholder="(x, y, z)"&gt;
  
          &lt;select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]" &gt;
            &lt;option value=" " disabled selected&gt;color&lt;/option&gt;
            &lt;option value="red"&gt;red&lt;/option&gt;
            &lt;option value="blue"&gt;blue&lt;/option&gt;
            &lt;option value="green"&gt;green&lt;/option&gt;
            &lt;option value="yellow"&gt;yellow&lt;/option&gt;    
          &lt;/select&gt; 
          &lt;button type="button" class="btn btn-success btn-add" id="add_more"&gt; &lt;span class="glyphicon glyphicon-plus" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;/button&gt;  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.form-inline .form-group {
      margin: 2px 2px;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>function getHTMLString() {
      var complex_html = [
          '&lt;div class="container"&gt;',
          '&lt;div class="row" id="dynamic_form"&gt;',
              '&lt;div class="form-group" &gt;',
                '&lt;div class="form-inline"&gt;',
                  '&lt;select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]"&gt;',
                    '&lt;option value=" " disabled selected&gt;primitive&lt;/option&gt;',
                    '&lt;option value="sphere"&gt;sphere&lt;/option&gt;',
                    '&lt;option value="triangle"&gt;triangle&lt;/option&gt;',
                  '&lt;/select&gt;',
                  '&lt;input type="number" class="input-small form-control" id="diameter"  name="Diameter[]" step="any" placeholder="diameter(D)"&gt;',
  
                  '&lt;input type="text" class="input-small form-control"  id="sphere-position" name="SpherePosition[]"  placeholder="(x, y, z)"&gt;',
  
                  '&lt;select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]"&gt;',
                    '&lt;option value=" " disabled selected&gt;color&lt;/option&gt;',
                    '&lt;option value="red"&gt;red&lt;/option&gt;',
                    '&lt;option value="blue"&gt;blue&lt;/option&gt;',
                    '&lt;option value="green"&gt;green&lt;/option&gt;',
                    '&lt;option value="yellow"&gt;yellow&lt;/option&gt;',    
                  '&lt;/select&gt;', 
                  '&lt;button type="button" class="btn btn-success btn-add" id="remove_more"&gt; &lt;span class="glyphicon glyphicon-minus" aria-hidden="true"&gt;&lt;/span&gt;',
                  '&lt;/button&gt;',  
                '&lt;/div&gt;',
              '&lt;/div&gt;',
            '&lt;/div&gt;',
            '&lt;/div&gt;',
      ].join('');
      return complex_html;
  }
  
  $(document).ready(function() {
      var formCount = 0;
      $('#add_more').on('click', function(e) {
          console.log("here")
          if (formCount &lt; 4) { 
              var html = getHTMLString();
              var element = $(html);
  
              $('#dynamic_form').append(html);
              formCount++;
          } else {
              return;
          }
      });
  
  
      $('#dynamic_form').on("click","#remove_more", function(e){ //user click on remove text
          e.preventDefault(); $(this).parent('div').parent('div').parent('div').remove(); formCount--;
  
      })
  });
  </code></pre>