"Multiple Image Upload UI [ Only UI ]"
Bootstrap 4.1.1 Snippet by AgniShadow

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Multiple Image Upload UI</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <br> <br> <br> <div class="row"> <div class="col"> <div class="img_container"> <i class="fa fa-plus"></i> </div> </div> <!--Image Holder - 01--> <div class="col"> <div class="thumbnailHolder"> <div aria-hidden="true" class="closeIcon"> <i class="fa fa-window-close " aria-hidden="true"></i> </div> <img src="https://i.pinimg.com/736x/9c/99/bc/9c99bc26ff55b330ace13e9c3abd82dd.jpg" alt="Cinque Terre" > </div> </div> <!--Image Holder - 02--> <div class="col"> <div class="thumbnailHolder"> <div aria-hidden="true" class="closeIcon"> <i class="fa fa-window-close " aria-hidden="true"></i> </div> <img src="https://i.pinimg.com/736x/9c/99/bc/9c99bc26ff55b330ace13e9c3abd82dd.jpg" alt="Cinque Terre" > </div> </div> <!--Image Holder - 03--> <div class="col"> <div class="thumbnailHolder"> <div aria-hidden="true" class="closeIcon"> <i class="fa fa-window-close " aria-hidden="true"></i> </div> <img src="https://i.pinimg.com/736x/9c/99/bc/9c99bc26ff55b330ace13e9c3abd82dd.jpg" alt="Cinque Terre" > </div> </div> <!--Image Holder - 04--> <div class="col"> <div class="thumbnailHolder"> <div aria-hidden="true" class="closeIcon"> <i class="fa fa-window-close " aria-hidden="true"></i> </div> <img src="https://i.pinimg.com/736x/9c/99/bc/9c99bc26ff55b330ace13e9c3abd82dd.jpg" alt="Cinque Terre" > </div> </div> <!--Image Holder - 05--> <div class="col"> <div class="thumbnailHolder"> <div aria-hidden="true" class="closeIcon"> <i class="fa fa-window-close " aria-hidden="true"></i> </div> <img src="https://i.pinimg.com/736x/9c/99/bc/9c99bc26ff55b330ace13e9c3abd82dd.jpg" alt="Cinque Terre" > </div> </div> </div> </div> </body> </html>
body { background-color: #b4b4aa; color: white; font-family: Arial, Helvetica, sans-serif; } .thumbnailHolder { position: relative; max-width:100px; } .thumbnailHolder img { position: relative; top:0; width: 100%; height: 100px; border-style:dashed; border-color: #ffc72c; z-index:50; } .thumbnailHolder .closeIcon { position: absolute; right:0; margin-top:-5px; margin-right:-5px; background-color:black; border-radius:50%; height: 20px; width: 20px; z-index:52; } .thumbnailHolder .closeIcon >i { font-size:25px; margin-left:-1px; margin-top:-3px; color:#ffc72c; } .img_container { text-align: center; max-width:100px; height:100px; border-style: dashed; border-color: #ffc72c; } .img_container > i { position:relative; width:100%; top: calc(50% - 10px); }

Related: See More

BLK• Design System
Image Crop jQuery
bootstrap 4 multiple carousel (3 Element by row)
Bootstrap 4 Carousel Multiple Slides

Questions / Comments: