Add a utility to your UI with Bootstrap 5 drag and drop file upload form example. Free Bootstrap 5 code — HTML, CSS & JS ready to copy, MIT licensed.
1<div class="drop-it-hot" id="drop-area">
2 <div class="circle">
3 <svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
4 <path d="M0 0h24v24H0z" fill="none"/>
5 <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
6 </svg>
7 </div>
8 <form class="choose-files">
9 <div class="button-wrapper">
10 <label class="label" for="fileElem">Drag image here to upload or</label>
11 <button type="button" class="btn">Choose image</button>
12 <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
13 </div>
14 </form>
15 <div id="gallery"></div>
16</div>
17
18<div class="editor">
19 <div class="range-wrapper">
20 <label for="contrast">Contrast</label>
21 <input class="range" name="contrast" value="100" type="range" min="0" max="200" value="0" data-unit="%">
22 </div>
23 <div class="range-wrapper">
24 <label for="brightness">Brightness</label>
25 <input class="range" name="brightness" value="100" type="range" min="0" max="200" data-unit="%">
26 </div>
27 <div class="range-wrapper">
28 <label for="blur">Hue</label>
29 <input class="range" name="hue-rotate" value="0" type="range" min="0" max="200" data-unit="deg">
30 </div>
31 <div class="range-wrapper">
32 <label for="sepia">Sepia</label>
33 <input class="range" name="sepia" value="0" type="range" min="0" max="200" data-unit="%">
34 </div>
35</div>
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.