<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 ----------> <div class="container"> <div class="row"> <div class="col"> <div class="camera-group"> <button class="camera btn btn-outline-secondary btn-lg btn-block">Take Photo</button> <input type="file" class="camera-input d-none"> <div class="camera-images"> <div class="image-group"> <span class="image-delete">X</span> <img src="https://icdn2.digitaltrends.com/image/digitaltrends/iphone-8-update-camera-sample-stone-path-500x300-c.jpg" class="img-fluid camera-preview" /> </div> <div class="image-group"> <span class="image-delete">X</span> <img src="https://www.designyourway.net/blog/wp-content/uploads/2018/08/photo-1529619768328-e37af76c6fe5-700x1050.jpg" class="img-fluid camera-preview" /> </div> </div> <div class="camera-data"></div> </div> </div> </div> </div>

.camera { min-height: 80px; } .camera-preview { width: auto; max-height: 100px; margin-top: 10px; } .image-group { display: inline-block; position: relative; } .image-delete { position: absolute; right: 10px; top: 10px; color: white; }

$(document).ready(function() { $('.camera').on('click', function(e) { $('.camera-input').click(); }); });