File inputs

Best practices

• Include copy that clearly indicates file size and file type restrictions.
• Include copy that explains why the files are necessary and what they’ll be used for after they’ve been uploaded.
• Always indicate when a file has been successfully added while displaying the name of the file.
• Provide options to remove and re-upload files that have already been added.

How it works

For file inputs, swap the .form-control for .form-control-file.

<div class="form-group">
  <label for="exampleFormControlFile1">Upload a file</label>
  <input type="file" class="form-control-file" id="exampleFormControlFile1">
  <small class="form-text text-muted">
    Files must be JPG's less than 2MB
  </small>
</div>