Back to Form
Form

File Upload Form

#form

Live preview

Source code

html
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="p-4 border rounded-4">
        <h4 class="fw-bold">Upload document</h4>
        <div class="border border-2 border-dashed rounded-4 p-5 text-center bg-light"><i class="bi bi-cloud-arrow-up display-3 text-primary"></i>
          <h5 class="mt-2">Drop files here or click to browse</h5>
          <p class="text-muted small">PDF, DOCX up to 10 MB</p><input type="file" class="form-control mt-2">
        </div>
        <div class="mt-3"><label class="form-label small fw-semibold">Description</label><textarea class="form-control" rows="2"></textarea></div><button class="btn btn-primary w-100 mt-3">Upload</button>
      </div>
    </div>
  </div>
</div>

More designs in this section