<div class="container">
	<form>
		
		<div class="field">
			<input type="text" required>
			<label>Full Name</label>
		</div>
		
	</form>
</div>
.field {											/* This keeps the label and input field together*/
	position: relative;
	margin: 45px auto;
}

input 				{							/* This styles the actual input box */
  font-size:18px;
  padding:10px;
  width:100%;
}

label 				 { 						/* This styles the label before interaction */
  font-size:18px;						
  font-weight:normal;
  position:absolute;
	left: 10px;
  top:13px;
	pointer-events: none;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

input:focus ~ label, input:valid ~ label, form:focus ~ label	{		/* This styles the label after interaction */
  top:-20px;
  font-size:14px;
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.