Here we create a feedback form demo with bootstrap plugins float label. in this demo also you can learn how to use bootstrap float lable plugins. this is very simple and stylish form plugins. ans also you can see some animatation onfocus in textbox.
you can get code of bootstrap float label form snippet. we give you example of floating-label-form-group , you can simple copy bellow code and use in your project. If it free snippets of bootstrap floating label examples So you have to simple get those bellow code from tab of html, css and js. you simple click on HTML Code then you will get html code floating label html css snippets, click on JS Code tab get code of jquery codd for bootstrap 4 float label form snippets, same as for CSS Code tab. It's pretty easy and simple example of floating placeholder bootstrap snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/bootstrap-float-label/v4.0.2/bootstrap-float-label.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3 col-sm-6 offset-sm-3 col-12">
<form class="card w-100 card-block bg-faded">
<legend class="m-b-1 text-center text-info"> <strong> Feedback </strong></legend>
<div class="form-group input-group">
<span class="has-float-label">
<input class="form-control" id="first" type="text" placeholder="Enter first name"/>
<label for="first">First name</label>
</span>
</div>
<div class="form-group input-group">
<span class="has-float-label">
<input class="form-control" id="last" type="text" placeholder="Enter last name"/>
<label for="last">Last name</label>
</span>
</div>
<div class="form-group input-group">
<span class="has-float-label">
<input class="form-control" id="email" type="text" placeholder="email@example.com"/>
<label for="email">Email</label>
</span>
</div>
<div class="form-group input-group">
<span class="has-float-label">
<input class="form-control" id="contact" type="text" placeholder="Enter mobile no"/>
<label for="contact">Mobile no</label>
</span>
</div>
<div class="form-group input-group">
<span class="has-float-label">
<textarea class="form-control" id="message" rows="3" placeholder="Enter your message"></textarea>
<label for="message">Message</label>
</span>
</div>
<button class="btn btn-block btn-info">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
body {
background: url("../demo/background-img.png") no-repeat scroll 0 0 / cover;
margin-top: 30px;
}
.card{
padding:15px 30px;
background-color: #f1f1f1;
}
.has-float-label input:focus,
.has-float-label textarea:focus,
.has-float-label select:focus{
border-color: #2CA8B3;
box-shadow: none;
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * {
font-size: 100%;
margin-top: 4px;
}
NiceSnippets.com
