Bootstrap/site/content/docs/5.0/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	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 >}}

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

Choose file... Browse

Choose file... Browse

{{< /example >}}