Bootstrap 5 Form Controls File Input

Last Updated : 01 Aug, 2024

Bootstrap5 Form controls File input provides customized ways to take the input of the files, i.e., the file input can accept as default, or can accept multiple files at once, or can be disabled the file input. This can also be done for any file input size, which varies from small size to large. This can be done by using the .form-control class that helps to control file input. To control the different sizes of the file input, we can simply specify the .form-control class followed by the form-control-sm or form-control-lg attribute. By default, form controls have a width of 100%.

Form controls File input Classes:

form-control-sm: This class helps to reduce the size to small for the file input.
form-control-lg: This class helps to increase the size to large for the file input.

Form controls File input Attributes:

default: This attribute does not require to specify explicitly.
multiple: This attribute enables the acceptance of multiple files for input at once.
disabled: This attribute disables or inactivates the input field to accept any file.

Syntax:

<input class="form-control" 
       type="file" multiple>

Example 1: This example describes the basic usage of the Form controls File input in Bootstrap5 by implementing the default & multiple file input.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                         initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h3>Form controls File input</h3>
    <div class="mb-3">
        <label for="DefaultFile" 
               class="form-label">
               Default file input
        </label>
        <input class="form-control" 
               type="file" 
               id="DefaultFile">
    </div>
    <div class="mb-3">
        <label for="MultipleFile" 
               class="form-label">
               Multiple file input
        </label>
        <input class="form-control" 
               type="file" 
               id="MultipleFile" multiple>
    </div>
</body>

</html>

Output:

Example 2: This example describes the basic usage of the Form controls File input in Bootstrap5 by implementing the small file input with multiple attribute & large file input with the disabled attribute.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                         initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h3>Form controls File input</h3>
    <div class="mb-3">
        <label for="SmallFile" 
               class="form-label">
            Small file with multiple input 
        </label>
        <input class="form-control 
                      form-control-sm" 
               id="SmallFile"
               type="file" multiple>
    </div>
    <div>
        <label for="largeFile" 
               class="form-label">
               Large file with disabled input
        </label>
        <input class="form-control 
                      form-control-lg" 
               id="largeFile" 
               type="file" disabled>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/forms/form-control/#file-input

Bootstrap 5 Form controls Color

jyotsnarasam

Improve

Article Tags :

Bootstrap 5 Form Controls File Input

Similar Reads

Forms

Form controls

Form Select

Form Checks and radios

Form Range

Form Input group

Form Floating labels

Form Validation

Thank You!

What kind of Experience do you want to share?