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 |