Signup/Sign In

How to create a file input field in Bootstrap 5?

The file input is a field used to upload any type of file from our device. We can upload images videos or any type of documents using this file input. We can easily add the file input field using Bootstrap 5.

Adding the default file input field using the form

  • The file input field can be added using the form class.
  • Add .form-label class within the <label> element. The for attribute will point to the id of <input>.
  • Add .form-input class to the <input> element with type="file" attribute and a unique id name.

Here is an example to add a default file input field.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
    
	<h3>Default input file field </h3>
	<label for="formFile" class="form-label"></label>
    <input class="form-control" type="file" id="formFile">
	
</body>
</html>

Adding multiple files in the input field

To add multiple files in the input field, use the .multiple attribute within <input>.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
    
	<label for="formFileMultiple" class="form-label">Multiple files input </label>
    <input class="form-control" type="file" id="formFileMultiple" multiple>
	
</body>
</html>

Output

Here is the output of the above program.

multiple input

Customizing input file size

The input file size can be customized using form controls. Add .form-control-lg to form-control class for large size input file and add .form-control-sm to form-control class for small size input file.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
    
	<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>
	  <label for="formFileLg" class="form-label">Large file input example</label>
	  <input class="form-control form-control-lg" id="formFileLg" type="file">
	</div>
	
</body>
</html>

Output:

Here is the output of the above program.

input file size

Disabled input file

The input file can be disabled using the .disabled attribute within the <input> tag. The input file field will be disabled and we will not be able to select any file.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
    
	<div class="mb-3">
	  <label for="formFile" class="form-label"> file input disabled</label>
	  <input class="form-control form-control-sm" id="formFile" type="file" disabled>
	</div>
	
</body>
</html>

Output:

Here is the output of the above program.

disabled input file field

Adding file input field using input group

The input group class is used to add file input within the page. Use the .input-group class to create a file input field. The <label>s are assigned with .input-text-group class. And for attribute is used to point id of <input> element.

  • The <input> are assigned with.form-control class and has a type="file" and some unique id.
  • We can add a label to the start or end by interchanging the position with the <input>element within the .input-group class.

Here is an example to create a file input field using the input group class.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
    
	<div class="input-group mb-3">
	  <label class="input-group-text" for="inputGroupFile01">Upload</label>
	  <input type="file" class="form-control" id="inputGroupFile01">
	</div>

	<div class="input-group mb-3">
	  <input type="file" class="form-control" id="inputGroupFile02">
	  <label class="input-group-text" for="inputGroupFile02">Upload</label>
	</div>

</body>
</html>

Output:

Here is the output of the above example

Input file field with input group

Conclusion

So now we can quickly and easily add input file fields using Bootstrap 5. Also, we can customize its size, add multiple files within the same field and disable the input file using Bootstrap 5.



About the author: