6.7 KiB
| layout | title | description | group | toc |
|---|---|---|---|---|
| docs | File browser | Use our custom file inputs for consistent cross-browser styling, built-in customization, and lightweight JavaScript. | forms | true |
{{< callout info >}} The recommended plugin to animate custom file inputs is bs-custom-file-input; it's what we use here in our docs. {{< /callout >}}
Default
The file input is the most gnarly of the bunch and requires additional JavaScript if you'd like to hook them up with functional Choose file... and selected file name text.
{{< example >}}
Add the disabled attribute to the <input> and the custom markup will be updated to appear disabled.
{{< example >}}
Longer placeholder text is truncated and an ellipsis is added when there's not enough space.
{{< example >}}
We hide the default file <input> via opacity and instead style the <label>, and declare a width and height on the <input> for proper spacing for surrounding content.
Sizing
You may also choose from small and large file inputs to match our similarly sized text inputs.
{{< example >}}
With icons
Like our textual .form-control, you can overlay icons on .form-files. See the [form control with icon docs]({{< docsref "/forms/form-control#with-icons" >}}) for more details.
We've also customized the file input's text here to match our icon.
{{< example >}}
Spinners
You can also place any of Bootstrap's [spinners]({{< docsref "/components/spinners" >}}) within the .form-control-icon.
{{< example >}}
Sizing
Add .form-file-sm or .form-file-lg to your .form-file and the .form-control-icon will automatically resize. However, the sizing of the icons themselves is up to you.
{{< example >}}
{{< example >}}