title: auto closing bootstrap alerts after form submission
body: <p>I have an ajax form that submits data into a database, and it uses bootstrap alerts for when it has been successful, I would like the alerts to close after a period of time has passed, but this needs to happen everytime.</p>
  
  <p>For example if I load the form and make some changes and press submit it will show the success alert and then close, if I then submit the form again for example I forgot to change something perhaps, it will show the alert again, but this time it doesn't close.</p>
  
  <p>How can I get the alert to show and close everytime?</p>
  
  <p>I've provided an example with a hardcoded alert in the page, this is however written into the page using javascript, I couldn't figure out a way to provide a full example with working ajax code that showed the success alert with no back end PHP.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;!--[if IE]&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=10"&gt;
  &lt;![endif]--&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  &lt;title&gt;Bootstrap Alerts&lt;/title&gt;
  &lt;link href="bootstrap.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"&gt;
  &lt;/head&gt;
  &lt;body class="bg-dark text-white"&gt;
      &lt;div id="wrap"&gt;
          &lt;div class="container-fluid mt-4"&gt;
              &lt;p&gt;Example Form&lt;/p&gt;
  
              &lt;div class="col-sm-6"&gt;
                  &lt;form action="process_add_task.php" method="post" class="row form-horizontal align-items-start" role="form"&gt;
                      &lt;input name="task_id" type="hidden" value="1" class="form-control input-sm" /&gt;
                      &lt;div class="col-sm-12"&gt;
                          &lt;div id="name-group" class="form-group"&gt;
                              &lt;label for="name" class="control-label"&gt;Name&lt;/label&gt;
                              &lt;input name="name" type="text" class="form-control input-sm" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-12 mx-auto text-center"&gt;
                          &lt;button type="submit" class="btn btn-md btn-primary"&gt;Submit &lt;span class="fa fa-arrow-right"&gt;&lt;/span&gt;&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
  
                  &lt;div class="col-sm-12 mx-auto"&gt;&lt;div class="alert alert-success" role="alert"&gt;Success&lt;/div&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="static/js/bootstrap/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="static/js/bootstrap/bootstrap.notify.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          window.setTimeout(function() {
              $(".alert").fadeTo(500, 0).slideUp(500, function() {
                  $(this).remove();
              });
          }, 1000);
      &lt;/script&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>