<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/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 ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" /> <div class="row "> <h2>UPLOAD UPTO 3 PICTURES</h2> <div class="uploadPicture"> <div class="input-group"> <div class="col-md-4 col-sm-4"> <div class="wrapper"> <input type="file" name="postImage" id="" class="form-control file"> <i class="fas fa-camera fa-lg"></i> <input type="submit" class="form-controlsubmit" value="Add Photo"> </div> </div> <div class="col-md-4 col-sm-4"> <div class="wrapper"> <input type="file" name="postImage" id="" class="form-control file"> <i class="fas fa-camera fa-lg"></i> <input type="submit" class="form-control submit" value="Add Photo"> </div> </div> <div class="col-md-4 col-sm-4"> <div class="wrapper"> <input type="file"name="postImage" id="" class="form-control file"> <i class="fas fa-camera fa-lg"></i> <input type="submit" class="form-control submit" value="Add Photo"> </div> </div> </div> </div> <hr> </div>

.uploadPicture .wrapper { width: 15vh; height: 15vh; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; position: relative; } .uploadPicture .wrapper:hover { text-decoration: none; background: yellowgreen; color: white; } .uploadPicture .wrapper .file { width: 100%; height: 100%; position: absolute; left: 0; right: 0; opacity: 0; cursor: pointer; } .uploadPicture .wrapper .submit:hover { color: white !important; } .uploadPicture .wrapper input { background: transparent; border: none; box-shadow: none; } .uploadPicture .input-group { margin-right: auto; margin-left:auto; } @media screen and (max-width:425px){ .uploadPicture .wrapper input{ font-size: 10px; } }