Bootstrap 5Forms

Bootstrap 5 File Upload

Bootstrap 5's file upload component is built on the native HTML `<input type='file'>` element, styled using the `.form-control` class to match the rest of your form UI. It supports single and multiple file selection, accept attribute filtering by MIME type or extension, and integrates cleanly with Bootstrap's label and validation feedback system. Use it whenever users need to submit documents, images, or data files as part of a form workflow.

Primary Class

.file-upload

Common Use Cases

→Profile avatar upload on a user account settings page, restricted to image formats (image/png, image/jpeg) using the accept attribute
→CV or resume submission in a job application form, accepting only PDF and Word document formats
→Bulk product image upload in an e-commerce admin panel using the multiple attribute to allow selecting several files at once
→Invoice or receipt attachment in an expense reporting form, where file size guidance is shown via helper text below the input

Variants & Classes

Variant	Description	Classes
File Upload Default	Standard file upload with Bootstrap's default styling.	`file-upload`
File Upload Responsive	Responsive variant that adapts to different screen sizes.	`file-upload file-upload-responsive`

Code Example

<div class="mb-3">
  <label for="resumeUpload" class="form-label">Upload your CV (PDF or Word)</label>
  <input
    class="form-control"
    type="file"
    id="resumeUpload"
    accept=".pdf,.doc,.docx"
    aria-describedby="resumeHelp"
  >
  <div id="resumeHelp" class="form-text">Maximum file size: 5MB. Accepted formats: PDF, DOC, DOCX.</div>
</div>

<div class="mb-3">
  <label for="productImages" class="form-label">Product images</label>
  <input
    class="form-control form-control-sm"
    type="file"
    id="productImages"
    accept="image/*"
    multiple
  >
  <div class="form-text">Select up to 10 images. JPG, PNG, and WebP supported.</div>
</div>

<div class="mb-3">
  <label for="invalidFile" class="form-label">Supporting document</label>
  <input class="form-control is-invalid" type="file" id="invalidFile">
  <div class="invalid-feedback">Please attach a valid PDF document before submitting.</div>
</div>

Live Examples

Basic File Upload

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated file upload with custom colours
✓File Upload with interactive states
✓Responsive file upload for all screen sizes

Best Practices

Filter file types at the input level, not just server-side

Use the `accept` attribute with specific MIME types or extensions (e.g., `accept="image/png, image/jpeg"` or `accept=".xlsx,.csv"`) to prevent users from selecting wrong file types before upload — though always validate server-side too since `accept` is easily bypassed.

Use form-control-sm or form-control-lg for size consistency

Bootstrap 5 supports `.form-control-sm` and `.form-control-lg` on file inputs, so your upload field matches the size of surrounding text inputs — especially important when file upload sits alongside other fields in a multi-column form layout.

Show validation state with is-valid and is-invalid

Apply `.is-invalid` with a `.invalid-feedback` div to show contextual error messages like 'File exceeds 10MB limit' directly below the input, keeping error messaging consistent with other Bootstrap form controls.

Pair with a visible label, never use placeholder as a substitute

File inputs don't support the `placeholder` attribute meaningfully across browsers; always use a visible `<label>` with a `for` attribute matching the input's `id` so the purpose is clear and the field is accessible to screen readers.

FAQ

How do I allow multiple file uploads in Bootstrap 5?

Add the `multiple` attribute to the `<input type='file'>` element — no additional Bootstrap class is needed. The browser's native file picker will allow the user to select more than one file at a time. You can combine this with `accept` to restrict file types: `<input class='form-control' type='file' multiple accept='image/*'>`. Note that enforcing a file count limit requires JavaScript since HTML alone can't cap the number of selected files.

Can I style the file upload button to match my brand colours?

Bootstrap's `.form-control` on a file input renders the browser's default 'Choose file' button, which is partially styled by the OS. To fully customise the button appearance, the common approach is to visually hide the native input (`opacity: 0; position: absolute`) and trigger it from a styled Bootstrap button using JavaScript (`document.getElementById('myInput').click()`). Alternatively, use a CSS-only approach with a `<label>` styled as a button (e.g., `class='btn btn-primary'`) wrapping or targeting the hidden input — the label click activates the file picker without JS.

How does Canvas Builder generate a File Upload component?

When you describe a file upload need in Canvas Builder — such as 'add a CV upload field to my application form' — it generates a complete, accessible Bootstrap 5 file input block including a linked label, the `accept` attribute set to the appropriate MIME types based on your description, helper text, and validation markup. It applies your brand's colour tokens to any custom button wrappers and outputs fully responsive HTML that fits into the surrounding form grid without additional tweaking.