floating labels for bootstrap 4 forms

based on https://github.com/tonystar/bootstrap-float-label/blob/master/bootstrap-float-label.css

Bootstrap 4 form row:

<div class="row">
    <div class="col">
        <div class="form-group">
            <label class="has-float-label">
                <input class="form-control" name="email" type="text" placeholder="E-Mail" class="is-invalid">
            <p class="invalid-feedback d-block">
                This is a validation error message that needs to be inserted dynamically

SCSS mixin:

@import "~bootstrap/scss/functions/";
@import "~bootstrap/scss/mixins/";
@import "~bootstrap/scss/variables/";

@mixin has-float-label {
// taken from https://github.com/tonystar/bootstrap-float-label/blob/master/bootstrap-float-label.css
display: block;
position: relative;

label, & > span {
background: white;
position: absolute;
cursor: text;
font-size: 75%;
opacity: 1;
-webkit-transition: all .2s;
transition: all .2s;
top: -.5em;
left: 0.75rem;
z-index: 3;
line-height: 1;
padding: 0 2px;

.form-control {

&::placeholder {
opacity: 0;
transition: all .2s;

&:placeholder-shown:not(:focus) + * {
font-size: 100%;
color: $input-placeholder-color;
transform: translateY(-50%);
top: 50%;