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>