Bootstrap drag and drop

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 :

Bootstrap jQuery Add More Field Quick and Easy

Dynamically add or remove form input fields using jQuery

Leave a Comment