Bootstrap File Upload
Copy
<!-- Default Upload --><div class="form-group"><label class="form-label" for="customFile">Default upload</label><input class="form-control" id="customFile" type="file"></div><!-- Large Upload --><div class="form-group"><label class="form-label" for="customFileLg">Large upload</label><input class="form-control form-control-lg" id="customFileLg" type="file"></div><!-- Small Upload --><div class="form-group"><label class="form-label" for="customFileSm">Small upload</label><input class="form-control form-control-sm" id="customFileSm" type="file"></div>File Upload Card 1
Copy
<div class="card"><div class="card-body py-5 text-center"><img class="w-75 mb-4" src="img/bg-img/29.jpg" alt=""><h5 class="mb-4">Upload your files</h5><form action="#" method="GET"><div class="form-file"><input class="form-control d-none" id="customFile" type="file"><label class="form-file-label justify-content-center" for="customFile"><span class="form-file-button btn btn-danger d-flex align-items-center justify-content-center shadow-lg"><svg width="22" height="22" viewBox="0 0 16 16" class="bi bi-plus-circle me-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/></svg> Upload File</span></label></div></form><h6 class="mt-4 mb-0">Supported files</h6><small>.jpg .png .jpeg .gif</small></div></div>
Upload your files
Supported files
.jpg .png .jpeg .gifFile Upload Card 2
Copy
<div class="card"><div class="card-body"><div class="file-upload-card"><svg width="48" height="48" viewBox="0 0 16 16" class="bi bi-file-earmark-arrow-up text-primary" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M4 0h5.5v1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h1V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"/><path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 0 1 9.5 3z"/><path fill-rule="evenodd" d="M8 12a.5.5 0 0 0 .5-.5V7.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.5.5 0 0 0-.708 0l-2 2a.5.5 0 1 0 .708.708L7.5 7.707V11.5a.5.5 0 0 0 .5.5z"/></svg><h5 class="mt-2 mb-4">Upload your files</h5><form action="#" method="GET"><div class="form-file"><input class="form-control d-none" id="customFile" type="file"><label class="form-file-label justify-content-center" for="customFile"><span class="form-file-button btn btn-primary shadow w-100">Upload File</span></label></div></form><h6 class="mt-4 mb-0">Supported files</h6><small>.jpg .png .jpeg .gif</small></div></div></div>