title: Bootstrap 4: validation breaks styling on inline form elements?
body: <p>I am trying to validate an inline form field, with Bootstrap 4. </p>
  
  <p>When validation is triggered, the inline form field jumps in width. Here is a fiddle (just click Enter without entering a value, to see the problem): <a href="https://jsfiddle.net/aq9Laaew/213418/" rel="nofollow noreferrer">https://jsfiddle.net/aq9Laaew/213418/</a></p>
  
  <p>How can I fix this?</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;form class="form-inline needs-validation" id="form-stage1" novalidate&gt;
    &lt;label class="sr-only" for="stage1-amount"&gt;Amount in thousands&lt;/label&gt;
    &lt;div class="input-group mb-1 mr-sm-1"&gt;
      &lt;div class="input-group-prepend"&gt;&lt;div class="input-group-text"&gt;£&lt;/div&gt;&lt;/div&gt;
      &lt;input type="number" step="5000" min="0" class="form-control" id="stage1-amount" required&gt;
    &lt;div class="invalid-feedback"&gt;Please enter an amount to proceed&lt;/div&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-secondary mb-1"&gt;Enter&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And this is my JavaScript:</p>
  
  <pre><code>d3.select('#form-stage1').on('submit', function(e) { 
    d3.event.preventDefault();
    d3.event.stopPropagation();
    d3.select(this).attr('class', 'was-validated');
  });
  </code></pre>