title: Column Expanding When Adding Text Bootstrap
body: <p>I have noticed a problem when running the following HTML Code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
      
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
          &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot; integrity=&quot;sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
      
      &lt;style&gt;
      
      .card
      {
          background-color: #EFF3FC!important;
      }
      
      .btnBlue
      {
          background: #1467ba;
          height: 25px;
          width: 70px;
          font-size: 14px; 
          color: white;   
      }
      
      &lt;/style&gt; 
      
      &lt;body&gt;
          &lt;div class=&quot;container-fluid d-flex flex-column min-vh-100 justify-content-center align-items-center text-center&quot;&gt;
              &lt;div class=&quot;row no-gutters&quot;&gt;
                  &lt;div class=&quot;col-md-4&quot;&gt;
                      &lt;div class=&quot;card card-block w-100 h-100&quot;&gt;
                  
                              &lt;nav class=&quot;navbar navbar-expand-lg navbar-light&quot; style=&quot;background-color: #EFF3FC;&quot;&gt;
                      
                                  
                                  
                              &lt;/nav&gt;
  
                              &lt;p class=&quot;h3 text-primary&quot;&gt;
                                  Sign In
                                  &lt;br&gt;
                                  &lt;br&gt;
                              &lt;/p&gt;
                  
                              &lt;form action=&quot;{% url 'landing' %}&quot; method=&quot;POST&quot;&gt;
  
      
                                  &lt;input type=&quot;email&quot; id=&quot;Username&quot; name=&quot;username&quot; placeholder=&quot;Username&quot;&gt;
                                  &lt;br&gt; &lt;br&gt; 
      
                                  &lt;input type=&quot;password&quot; id=&quot;Password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot;&gt;
                                  &lt;br&gt; &lt;br&gt;
      
  
                                  &lt;h6&gt;
                                  &lt;p class=&quot;text-danger&quot;&gt; 
                                      &lt;small&gt; The Username or Password you entered does not match our records. Please try again. &lt;/small&gt; 
                                      &lt;br&gt;
                                  &lt;/p&gt;
                                  &lt;/h6&gt;
  
      
                                  &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary align-center btn-sm&quot;&gt;Log In&lt;/button&gt;
  
                              &lt;/form&gt;
  
                              &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; 
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class=&quot;col-md-8&quot;&gt;
                      &lt;div class=&quot;card card-block w-100 h-100&quot;&gt;
                          &lt;p class=&quot;h3 text-primary&quot;&gt;
                              &lt;br&gt; &lt;br&gt; 
                              Sign Up
                              &lt;br&gt;
                              &lt;br&gt;
                          &lt;/p&gt;
  
                          &lt;p&gt;
                              Don't have an account yet? Enter your username and we'll send you a link for a secure sign-up experience!
                              &lt;br&gt;
                              &lt;br&gt;
                          &lt;/p&gt;
  
                          &lt;div class=&quot;form-group&quot;&gt;
                              &lt;input type=&quot;email&quot; id=&quot;Email&quot; name=&quot;Email&quot; placeholder=&quot;Email&quot;&gt;
                              &lt;br&gt;
                          &lt;/div&gt;
  
                          &lt;h6&gt;
                          &lt;p class=&quot;text-danger&quot; hidden&gt; 
                              &lt;small&gt; Please check the email you've entered and try again! &lt;/small&gt;
                              &lt;br&gt;
                          &lt;/p&gt;
                          &lt;/h6&gt;
  
                          &lt;div class=&quot;form-group&quot;&gt;
                              &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary align-center btn-sm&quot;&gt;Submit&lt;/button&gt;
                          &lt;/div&gt;
                          
                          
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The Columns (md-4 and md-8) expand/compress whenever I add text. For example, try removing the line <code>&lt;small&gt; The Username or Password you entered does not match our records. Please try again. &lt;/small&gt; </code>. The left container will suddenly shrink in size. Add the line back and the container will expand. How do I solve this problem? Ideally I don't want the width to change regardless of adding/deleting that line.</p>