Bootstrap drag and drop
Step 1 : Create Html file index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Bootstrap drag and drop - mycodeshub.com</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<br>
<h3> Bootstrap drag and drop - mycodeshub.com</h1>
<div class="row">
<div class="col-md-6">
<form method="post" action="#" id="#">
<div class="form-group files">
<input type="file" class="form-control" multiple="">
</div>
</form>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
</body>
</html>
Step 2 : Create CSS file style.css
.files{
position:relative;
border: 3px dashed #0142fe;
text-align: center;
margin: 0;
width: 100% !important;
height:250px;
overflow:hidden;
}
.files input {
width: 100% !important;
height:200px;
border:none;
padding:0;
background:transparent;
text-align:center;
}
.files{ position:relative}
.files:after {
pointer-events: none;
position: absolute;
top: 60px;
left: 0;
width: 70px;
right: 0;
height: 70px;
content: "";
background-image: url(https://image.flaticon.com/icons/svg/130/130993.svg);
display: block;
margin: 0 auto;
background-size: 100%;
background-repeat: no-repeat;
}
.files:before {
content:"Browse or Drag file here";
position:absolute;
bottom:55px;;
left:0;
right:0;
display:block;
text-align:center;
color:#0142fe;
font-weight:bold;
}Related Post :
Leave a Reply
You must be logged in to post a comment.