.custom-file
<divclass="custom-file"><inputtype="file"class="custom-file-input"id="customFile"><labelclass="custom-file-label"for="customFile">Custom File</label></div>
We hide the default file <input>via opacityand instead style the <label>. The button is generated and positioned with ::after. Lastly, we declare a widthand heighton the <input>for proper spacing for surrounding content.
<input>
opacity
<label>
::after
width
height
.custom-file-label-rounded