Bootstrap 5 File Upload Example

In today’s tutorial, we will create a file upload form using bootstrap 5. For this file upload ui we will not use any custom css classes or any other css library. we will create bootstrap 5 multiple file upload, file upload with size like small medium, we will also design file upload form with shadow style and border style. first you need to setup bootstrap 5 project. you can use cdn or read below article.

How to install & setup bootstrap 5

Bootstrap 5 File Upload Example

1. Default file input example.

<div class="mb-2">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>

bootstrap 5 simple image file upload

2. Bootstrap 5 file upload form sizes.

<div class="mb-3">
  <label for="formFileSm" class="form-label">Small file input example</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div class="mb-3">
  <label for="formFileSm" class="form-label">Default file input example</label>
  <input class="form-control" id="formFileMd" type="file">
</div>
<div class="mb-3">
  <label for="formFileLg" class="form-label">Large file input example</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

Bootstrap 5 file upload form size

3. Bootstrap 5 Multiple files.

<div class="mb-3">
  <label for="formFileMultiple" class="form-label">Multiple files input example</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>

4. Bootstrap 5 Disabled file upload form.

<div class="mb-3">
  <label for="formFileDisabled" class="form-label">Disabled file input example</label>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>

5. Bootstrap 5 readonly file upload form.

<div class="mb-3">
  <label for="formFileReadonly" class="form-label">Readonly file input example</label>
  <input class="form-control" type="file" id="formFileReadonly" readonly>
</div>

6. Bootstrap 5 shadow style file upload

<div class="mb-3">
  <label for="formFile" class="form-label">Shadow file input example</label>
  <input class="form-control shadow" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFile" class="form-label">Shadow Sm file input example</label>
  <input class="form-control shadow-sm" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFile" class="form-label">Shadow lg file input example</label>
  <input class="form-control shadow-lg" type="file" id="formFile">
</div>

bootstrap 5 shadow style file upload

7. Bootstrap 5 Border style file upload.

<div class="mb-3">
  <label for="formFile" class="form-label">border style file input example</label>
  <input class="form-control border border-primary" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFile" class="form-label">border style file input example</label>
  <input class="form-control border border-2 border-success" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFile" class="form-label">border style file input example</label>
  <input class="form-control border border-danger" type="file" id="formFile">
</div> 

bootstrap 5 border style file upload form