<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrap">
<div class="mat-div">
<label for="first-name" class="mat-label">First Name</label>
<input type="text" class="mat-input" id="first-name">
</div>
<div class="mat-div">
<label for="first-name" class="mat-label">Last Name</label>
<input type="text" class="mat-input" id="last-name">
</div>
<div class="mat-div">
<label for="address" class="mat-label">Address</label>
<input type="text" class="mat-input" id="address">
</div>
<button>Submit</button>
</div>
<script>
$(".mat-input").focus(function(){
$(this).parent().addClass("is-active is-completed");
});
$(".mat-input").focusout(function(){
if($(this).val() === "")
$(this).parent().removeClass("is-completed");
$(this).parent().removeClass("is-active");
})
</script>
