title: Boostrap 4 form messes alignment
body: <p>I have the folowing code that renders different from what I was expecting when you add the form tag.
  Try removing the form tags to see the difference.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
      &lt;html lang="en"&gt;
        &lt;head&gt;
          &lt;!-- Required meta tags --&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      
          &lt;!-- Bootstrap CSS --&gt;
          &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" /&gt;
          &lt;title&gt;Hello, world!&lt;/title&gt;
          &lt;style&gt;
      html, body {
        height: 100%;
      }
      
      .min-100 {
          min-height: 100%;
      }
      .fondo {
        background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}
          &lt;/style&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;div class="container-fluid min-100 d-flex flex-column"&gt;
              &lt;div class="row flex-grow-1 vh-100 bg-info"&gt;
                  &lt;main class="col p-4 flex-grow-1 fondo"&gt;
                      &lt;div class="container d-flex h-100"&gt;
                          &lt;div class="row justify-content-center align-self-center col-md-12"&gt;
                              &lt;h1 class="text-white mb-4 sombra"&gt;Title&lt;/h1&gt;
                              &lt;form action=""&gt;
      
                              &lt;div class="form-group col-md-12"&gt;
                                &lt;div class="input-group mb-3"&gt;
                                  &lt;div class="input-group-prepend"&gt;
                                    &lt;span class="input-group-text" id="basic-addon1"&gt;&lt;i class="fas fa-link"&gt;&lt;/i&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;input type="text" class="form-control" placeholder="Upload File"&gt;
                                  &lt;div class="input-group-append"&gt;
                                    &lt;button class="btn btn-success"&gt;Guardar&lt;/button&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/form&gt;
                                &lt;p class="text-white lead sombra"&gt;A paragraph!&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/main&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>With form tag
  <a href="https://i.stack.imgur.com/yIArN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yIArN.jpg" alt="rendered"></a></p>
  
  <p>Without form tag
  <a href="https://i.stack.imgur.com/MDwx5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MDwx5.jpg" alt="enter image description here"></a></p>
  
  <p>I want it to look like the second picture, but dont know why the form tag changes the alignment.</p>