title: bootstrap file upload with image preview
body: <p>I am attempting to do file uploads with bootstrap but I don't know what I am doing so can someone tell me how to do this and how to get an image preview for the upload as the file upload is intended to upload images onto my website. Here is what I have so far in HTML.</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;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"&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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;form class="form-horizontal" enctype="multipart/form-data"&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="control-label col-sm-2"&gt;Pic Name:&lt;/label&gt;
      &lt;div class="col-xs-4"&gt;
        &lt;input type="text" class="form-control" name="profilepicname" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="control-label col-sm-2"&gt;Upload Pic:&lt;/label&gt;
      &lt;div class="col-xs-3"&gt;
        &lt;input type="file" name="profilepic" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also there is a big space between naming the picture and the file upload section on the webpage. How, do I get rid of this?</p>