Bootstrap/site/content/docs/4.3/forms/file.md

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	false

{{< callout info >}} The recommended plugin to animate custom file input: bs-custom-file-input, that's what we are using currently here in our docs. {{< /callout >}}

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 >}}

Choose file... Browse

{{< /example >}}

Add the disabled attribute to the <input> and the custom markup will be updated to appear disabled.

{{< example >}}

Choose file... Browse

{{< /example >}}

Longer placeholder text is truncated and an ellipsis is added when there's not enough space.

{{< example >}}

Lorem ipsum posuere consectetur est at lobortis nulla vitae elit libero a pharetra augue fusce dapibus tellus ac cursus commodo tortor mauris condimentum nibh ut fermentum massa justo sit amet risus cras mattis consectetur purus sit amet fermentum Browse

{{< /example >}}

We hide the default file <input> via opacity and instead style the <label>. The button is generated and positioned with ::after. Lastly, we declare a width and height on the <input> for proper spacing for surrounding content.