Bootstrap 5Forms

Bootstrap 5 File Upload

Q: How do I allow multiple file uploads in Bootstrap 5?

Add the multiple attribute to the 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: . Note that enforcing a file count limit requires JavaScript since HTML alone can't cap the number of selected files.

Q: 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 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.

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.

Bootstrap class

.form-control (type="file")

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 and classes

Variant	Description and classes	Classes
Default	Native file picker styled like other inputs.`form-control + type="file"`	`form-control + type="file"`
Multiple files	Lets the user choose several files.`form-control + multiple attribute`	`form-control + multiple attribute`
Sizes	Smaller or larger picker.`form-control-sm / form-control-lg`	`form-control-sm / form-control-lg`
Validation	Error state with a message.`is-invalid + invalid-feedback`	`is-invalid + invalid-feedback`

Code example

HTML

<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 template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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.