In this tutorial, we will learn how to create a custom File Upload Input button using Bootstrap 5/4.

HTML File Input

File uploading is a common and consecutive task when it comes to uploading a File to the server. In that case, the first thing is to create this element. HTML File Input allows us to upload single and multiple images and files.

Here is the HTML syntax which forms the File Input.

<input type="file" id="file" name="file">

MarkupCopy

A simple File input attribute consists of type="file" and name="" properties.

Bootstrap 4/5 Custom File Input Types

Bootstrap 5/4 mainly offers two File Input types (Basic and Custom Inputs) that you can use to upload files and images simultaneously for single and multiple files.

The basic file input can be created by just adding a .form-control-file class with the <input>element.

<form>
  <div class="form-group">
    <input type="file" class="form-control-file">
  </div>
</form>

MarkupCopy

Creating Bootstrap custom file input is easy; you have to include a .custom-file-input class with HTML’s <input> attribute. Also, add a .custom-file-label class with a <label> attribute.

#bootstrap