Bootstrap snippet and html example. Floating label css

<div class="container">
    <div class="jumbotron">
		<h1>Floating label css</h1>
	</div>
    
    <div class="col-md-5 col-md-offset-1">
		<form role="form"  id="floating-label">
		
			<div class="form-group">
				<label class="control-label">First Name</label>
				<input type="text" class="form-control" />
			</div>

			<div class="form-group">
				<label class="control-label">Last Name</label>
				<input type="text" class="form-control"/>
			</div>
		
		</form>
	</div>

</div>

body{margin-top:20px;}

#floating-label .form-group {
    									display: flex;
										height: 55px;
									}

									#floating-label .control-label {
										font-size: 16px;
										font-weight: 400;
										opacity: 0.4;
										pointer-events: none;
										position: absolute;
										transform: translate3d(6px, 22px, 0) scale(1);
										transform-origin: left top;
										transition: 240ms;
									}

									#floating-label .form-group.focused .control-label {
										opacity: 1;
										transform: scale(0.75);
									}

									#floating-label .form-control {
										align-self: flex-end;
									}

									#floating-label .form-control::-webkit-input-placeholder {
										color: transparent;
										transition: 240ms;
									}

									#floating-label .form-control:focus::-webkit-input-placeholder {
										transition: none;
									}

									#floating-label .form-group.focused .form-control::-webkit-input-placeholder {
										color: #bbb;
									}

$('.form-control').on('focus blur', function (e) {
    	$(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
	}).trigger('blur');