File browser
Use our custom file inputs for consistent cross-browser styling, built-in customization, and lightweight JavaScript.
Form's file on BootstrapDefault
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.
<div class="form-file"><input class="form-file-input" id="customFile" type="file" /><label class="form-file-label" for="customFile"><span class="form-file-text">Choose file...</span><span class="form-file-button">Browse</span></label></div>Sizing
You may also choose from small and large file inputs to match our similarly sized text inputs.
<div class="form-file form-file-lg mb-3"><input class="form-file-input" id="customFileLg" type="file" /><label class="form-file-label" for="customFileLg"><span class="form-file-text">Choose file...</span><span class="form-file-button">Browse</span></label></div>
<div class="form-file form-file-sm"><input class="form-file-input" id="customFileSm" type="file" /><label class="form-file-label" for="customFileSm"><span class="form-file-text">Choose file...</span><span class="form-file-button">Browse</span></label></div>
