File Input
Bootstrap 4 File Input with Material Design UI
File Input allows users to upload one or more files (documents, images or sheets). It is also used to import data from files (sheets).
Bootstrap 4 File Input
Bootstrap 4 provides 2 types of file inputs - basic and custom. For basic file input, use class .form-control-file in the <input> tag. For custom file input, use .custom-file-input in the <input> tag and .custom-file-label in the <label> tag.
Propeller File Input
Propeller applies Material design standards to the Bootstrap 4 custom file input to create Propeller file input. Add .pmd-custom-file followed by .custom-file to customize the Bootstrap 4 custom file input into Propeller file input.
Propeller Outline File Input
Add .pmd-custom-file-outline followed by .custom-file to customize the Bootstrap 4 Custom File Input into Propeller Outline File Input.
Propeller Filled File Input
Add .pmd-custom-file-filled followed by .custom-file to customize the Bootstrap 4 Custom File Input into Propeller Filled File Input.
Inverse File Input
Use .bg-dark and .text-white to the card structure to create an inverse file input.
File Input Validation
Configuration Options
The table lists some HTML attributes that are required for positioning and styling of the inputs.
| Propeller Class | Effect | Remark |
|---|---|---|
.pmd-custom-file |
Add this class to create Propeller customized file input | Optional |
.pmd-custom-file-outline |
Add this class to create Propeller outline file input | Optional |
.pmd-custom-file-filled |
Add this class to create Propeller filled file input | Optional |