title: With Bootstrap 4, how to prevent form groups from overlapping on one another?
body: <p>I'm using Bootstrap 4 to create a Profile Edit form in my React app..</p>
  
  <p>The form looks fine on a large display, but when on a small display like mobile, the <code>form-groups</code> are overlapping. See the problem image below, notice how the Profile Photo placeholder image is on top of First Name when it should be pushing First Name down and not overlapping.</p>
  
  <p>Am I doing something wrong with the bootstrap Grid system or with form-groups?</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/v9fpfxyo/" rel="nofollow noreferrer">https://jsfiddle.net/v9fpfxyo/</a></p>
  
  <p><strong>CORRECT:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/9BTyy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9BTyy.png" alt="enter image description here"></a></p>
  
  <p><strong>PROBLEM:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/vvpFo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vvpFo.png" alt="enter image description here"></a></p>
  
  <p>code from JSFiddle:</p>
  
  <pre><code>&lt;div class="container"&gt;
     &lt;form&gt;
        &lt;div class="row"&gt;
           &lt;div class="col-lg-3 col-sm-12"&gt;
              &lt;div class="form-group" style="height: 100%;"&gt;
                 &lt;label for="files"&gt;Change your profile photo&lt;/label&gt;
                 &lt;span&gt;
                    &lt;div class="" style="width: 100%; height: 100%; font-size: 0px; margin-bottom: 1rem; background-color: rgb(29, 161, 242); background-image: url(&amp;quot;https://abs.twimg.com/a/1498195419/img/t1/highline/empty_state/owner_empty_avatar.png&amp;quot;); background-position: 50% center;"&gt;
                       &lt;!-- react-text: 85 --&gt;Try dropping some files.&lt;!-- /react-text --&gt;&lt;input type="file" accept="image/jpeg, image/png" multiple="" style="display: none;"&gt;
                    &lt;/div&gt;
                    &lt;button type="button" class="btn btn-secondary btn-sm btn-block"&gt;Upload new Photo&lt;/button&gt;&lt;!-- react-text: 88 --&gt;&lt;!-- /react-text --&gt;
                 &lt;/span&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="col-lg-9 col-sm-12"&gt;
              &lt;div class="form-group"&gt;
                 &lt;label&gt;First Name&lt;/label&gt;
                 &lt;div&gt;&lt;input type="text" name="first_name" value="XXX" placeholder="First Name" class="form-control"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                 &lt;label&gt;Last Name&lt;/label&gt;
                 &lt;div&gt;&lt;input type="text" name="last_name" value="XXX" placeholder="Last Name" class="form-control"&gt;&lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row row justify-content-end"&gt;
           &lt;div class="col-lg-9 col-sm-12"&gt;&lt;button type="submit" class="btn btn-primary"&gt;Save Changes&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
     &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>