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"> <span>E-Mail</span> </label> <p class="invalid-feedback d-block"> This is a validation error message that needs to be inserted dynamically </p> </div> </div> </div>
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%;
}
}
}