title: Boostrap 4 div expanding after form submission
body: <p>Wondering if anyone can help... i have this weird issue where my Div is expanding once the form has been Submitted.</p>
  
  <p>After submission i have made an alert if the submission was successful. This alert works but when i click "OK" and go back to the web page, the divs have expanded massively.</p>
  
  <p>I have googled this but cant seem to find any scenarios where people have seen this.</p>
  
  <p>CSS:</p>
  
  <pre><code>/* sm */
  @media (min-width: 768px) {
    #formDiv {
      width: 20%;
    }
  }
  
  
  /* md */
  @media (min-width: 992px) {
    #formDiv {
      width: 20%;
    }
  }
  
  
  /* lg */
  @media (min-width: 1200px) {
    #formDiv {
      width: 20%;
    }
  }
  
  body {
    /*font-family: 'Shrikhand', cursive;*/
    font-family: 'Rancho', cursive;
    /*font-family: 'Tangerine', cursive; Snelsmore House, Oxford Rd, Donnington, Newbury RG14 3AL*/
    width: 100%;
    height: 100%;
    background: #D4CFBD;
  }
  
  .jumbotron {
    /*font-family: 'Rancho', cursive;*/
    text-align: center;
    margin-bottom: 0px;
  }
  
  .container-fluid {
    min-height: 100%;
  }
  
  #mainContainer {
    padding-top: 20px;
    padding-bottom: 20px;
    background: #D4CFBD;
  }
  
  #mainDiv {
    text-align: center;
    background: #D4CFBD;
    height: 50%;
  }
  
  #MillyPic,
  #stefnCraigPic {
    height: auto;
    max-width: 100%;
  }
  
  #formDiv {
    padding-top: 30px;
    margin: auto;
    max-width: 100%;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container-fluid" id="mainContainer"&gt;
      &lt;div id="mainDiv"&gt;
          &lt;h2&gt;Hey there,&lt;/h2&gt;
          &lt;h2&gt;We would like to invite you to our wedding on the 22nd Dec 2018!&lt;/h2&gt;
          &lt;br&gt;
          &lt;h3&gt;To confirm your attendance can you please fill in the below form...&lt;/h3&gt;
      &lt;/div&gt;
      &lt;hr&gt;
      &lt;div id="formDiv"&gt;
        &lt;div id="RSVP"&gt;
            &lt;form method="post" class="justify-content-center text-center" &gt;
                &lt;div class="form-check text-left" id="RadioYes"&gt;
                    &lt;input class="form-check-input" type="radio" name="responseRadio" id="Yes" value="1" onclick="dynInput();"&gt;
                    &lt;label class="form-check-label" for="Yes"&gt;
                        &lt;h4&gt;Attending&lt;/h4&gt;
                    &lt;/label&gt;
                &lt;/div&gt;
                &lt;div class="form-check text-left" id="RadioNo"&gt;
                    &lt;input class="form-check-input" type="radio" name="responseRadio" id="No" value="0" checked&gt;
                    &lt;label class="form-check-label" for="No"&gt;
                        &lt;h4&gt;Cant Make it&lt;/h4&gt;
                    &lt;/label&gt;
                &lt;/div&gt;
                &lt;hr id="attendanceHr" class="d-none"&gt;
                &lt;div class='d-none form-group' id='guestNamesDivs'&gt;
                    &lt;div class="form-group text-left"&gt;
                        &lt;label for="guestName1"&gt;&lt;h4&gt;Guest One:&lt;/h4&gt;&lt;/label&gt;
                        &lt;input type="text" class="form-control" id="guestName1" name="guestName1" placeholder="Firstname and Surname"&gt;
                    &lt;/div&gt;
                    &lt;div class="form-group text-left"&gt;
                        &lt;label for="guestName2"&gt;&lt;h4&gt;Guest Two:&lt;/h4&gt;&lt;/label&gt;
                        &lt;input type="text" class="form-control" id="guestName2" name="guestName2" placeholder="Firstname and Surname"&gt;
                    &lt;/div&gt;
                    &lt;div class="form-group form-check text-left"&gt;
                          &lt;input type="checkbox" class="form-check-input" id="dietaryReq" name="DRYN" onclick="dietaryReqDisplay();"&gt;
                        &lt;label class="form-check-label lead" for="dietaryReq"&gt;Dietary Requirements.&lt;/label&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="d-none" id="dietaryReqTextDiv"&gt;
                    &lt;div class="form-group"&gt;
                      &lt;textarea class="form-control" id="dietaryReqTextArea" name="DR" rows="3"&gt;&lt;/textarea&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;br&gt;
                &lt;button type="submit" name="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
            &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>PHP - TEST alert if form submission successfully goes to Database:</p>
  
  <pre><code>if(isset($_POST['submit'])){    
      $attending = $_POST['responseRadio'];
  
      if($attending == "1"){
          $guest_one = mysqli_real_escape_string($conn, $_POST['guestName1']);
          $guest_two = mysqli_real_escape_string($conn, $_POST['guestName2']);
          $dietary_req = mysqli_real_escape_string($conn, $_POST['DRYN']);
          $dietary_needs = mysqli_real_escape_string($conn, $_POST['DR']); 
  
          if($_POST['DRYN']=="on"){
              $dietary_req = "1";
              $dietary_req = mysqli_real_escape_string($conn,$dietary_req);
          }else{
              $dietary_req = "0";
              $dietary_req = mysqli_real_escape_string($conn,$dietary_req);
          }
  
          $sql = "INSERT INTO weddingRSVP (guest_1, guest_2, attending, dietary_req, dietary_info) VALUES ('$guest_one', '$guest_two', '$attending', '$dietary_req','$dietary_needs');";        
  
          if(mysqli_query($conn, $sql)){
              $message .= "You have successful RSVP'd to the wedding. \n As you are attending please go ahead and make a song choice for the reception :)!";
              echo "&lt;script type='text/javascript'&gt;
                      alert('test')
                    &lt;/script&gt;";
          } else{ 
              $error .=  "ERROR: Could not able to execute $sql. " . mysqli_error($link);
          }
  
      }else{        
  
          $sql = "INSERT INTO weddingRSVP (guest_1, guest_2, attending, dietary_req, dietary_info) VALUES ('$guest_one', '$guest_two', '$attending', '$dietary_req','$dietary_needs');";        
  
          if(mysqli_query($conn, $sql)){
              $message .= "You have successful RSVP'd to the wedding. \n As you are attending please go ahead and make a song choice for the reception :)!";
          } else{ 
              $error .= "ERROR: Could not able to execute $sql. " . mysqli_error($link);
          }
      }
  }
  </code></pre>
  
  <p>If anyone has any ideas on why this is happening i would be really grateful.</p>
  
  <p>EDIT - ADDING JAVASCRIPT:</p>
  
  <pre><code>var radioYes = document.getElementById("Yes");
  var DivRadioNo = document.getElementById("RadioNo");
  var dietaryReq = document.getElementById("dietaryReq");
  
  function dynInput () {
      if (radioYes.checked) {
        document.getElementById("guestNamesDivs").classList.remove("d- 
        none");
        DivRadioNo.classList.add("d-none");
        document.getElementById("attendanceHr").classList.remove("d- 
        none");
      }
  }
  
  function dietaryReqDisplay () {
      if (dietaryReq.checked) {
       document.getElementById("dietaryReqTextDiv").classList.remove("d- 
       none");
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/2eECE.png" rel="nofollow noreferrer">Before Submission</a></p>
  
  <p><a href="https://i.stack.imgur.com/k1Ar3.png" rel="nofollow noreferrer">after submission (1)</a></p>
  
  <p><a href="https://i.stack.imgur.com/kywld.png" rel="nofollow noreferrer">after submission (3)</a></p>