title: How to get a good file upload button in bootstrap 4 laravel 5?
body: <p>I want to get a file upload input like in the below example</p>
  
  <p><a href="https://www.codeply.com/go/SkIJQ5LqKp/bootstrap-4-file-input" rel="nofollow noreferrer">https://www.codeply.com/go/SkIJQ5LqKp/bootstrap-4-file-input</a></p>
  
  <pre><code>&lt;input type="file" id="dp_file_input" name="demo" /&gt;
  </code></pre>
  
  <p>This outputs a very bad look and therefore i want to have the one that is shown in the link.</p>
  
  <p>Even after copying the code as it is, its not displaying anything at all. 
  Bootstrap and all other things are working properly only problem is that the file input is not displaying.</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-css lang-css prettyprint-override"><code>#customFile .custom-file-control:lang(en)::after {
    content: "Select file...";
  }
  
  #customFile .custom-file-control:lang(en)::before {
    content: "Click me";
  }
  
  /*when a value is selected, this class removes the content */
  .custom-file-control.selected:lang(en)::after {
    content: "" !important;
  }
  
  .custom-file {
    overflow: hidden;
  }
  .custom-file-control {
    white-space: nowrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;br&gt;
  &lt;div class="container"&gt;
      This is not working
      &lt;label class="custom-file" id="customFile"&gt;
          &lt;input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp"&gt;
          &lt;span class="custom-file-control form-control-file"&gt;&lt;/span&gt;
      &lt;/label&gt;
      
      &lt;input type="file" id="dp_file_input" name="demo" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>