BootstrapHow-ToBeginner · 3 min read

How to Create File Upload in Bootstrap: Simple Guide

To create a file upload in Bootstrap, use the input element with type="file" inside a form and add Bootstrap classes like form-control for styling. Bootstrap 5 uses form-control for file inputs to make them look consistent and responsive.

📐

Syntax

The basic syntax for a Bootstrap file upload input uses the input element with type="file". You add the class form-control to style it according to Bootstrap's design. This input can be placed inside a form element.

input type="file": lets users select files from their device.
class="form-control": applies Bootstrap styling for consistent look and feel.
form: optional container for grouping inputs and handling submissions.

html

<form>
  <input class="form-control" type="file" id="formFile">
</form>

Output

A styled file input button labeled 'Choose file' with no file selected text next to it.

💻

Example

This example shows a complete Bootstrap file upload input inside a form with a label. It demonstrates how the file input looks and behaves with Bootstrap styling.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap File Upload Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container py-4">
    <form>
      <div class="mb-3">
        <label for="formFile" class="form-label">Upload your file</label>
        <input class="form-control" type="file" id="formFile">
      </div>
    </form>
  </main>
</body>
</html>

Output

A webpage with a labeled file upload input styled by Bootstrap, showing a button to choose a file and text 'No file chosen' next to it.

⚠️

Common Pitfalls

Common mistakes when creating file uploads in Bootstrap include:

Not adding the form-control class, which results in a plain browser default input that looks inconsistent.
Using outdated Bootstrap classes like form-control-file which was used in Bootstrap 4 but removed in Bootstrap 5.
Forgetting to add the enctype="multipart/form-data" attribute on the form when submitting files to a server.

html

<!-- Wrong: missing Bootstrap class -->
<form>
  <input type="file" id="fileInput">
</form>

<!-- Right: with Bootstrap 5 class and enctype -->
<form enctype="multipart/form-data">
  <input class="form-control" type="file" id="fileInput">
</form>

Output

The first input looks plain and unstyled; the second input is styled with Bootstrap's consistent look.

📊

Quick Reference

Feature	Description	Bootstrap 5 Class
File input element	Allows user to select files	`input type="file"` with `form-control`
Label	Describes the file input	`label.form-label`
Form attribute	Needed for file upload submission	`enctype="multipart/form-data"`
Bootstrap 4 legacy	Old class for file input	`form-control-file` (not used in Bootstrap 5)

✅

Key Takeaways

Use input type="file" with Bootstrap's form-control class for styled file uploads.

Always include a label with class form-label for accessibility and clarity.

Add enctype="multipart/form-data" to your form when submitting files to a server.

Avoid outdated classes like form-control-file from Bootstrap 4; use Bootstrap 5 syntax.

Test your file input in different browsers to ensure consistent appearance and behavior.