A SCSS (Sass) version of the Bootstrap 4 floating-labels.css from https://getbootstrap.com/docs/4.0/examples/floating-labels/

form-floating-label.scss

// A SCSS (Sass) version of the floating-labels.css from https://getbootstrap.com/docs/4.0/examples/floating-labels/

.form-label-group {
    margin-bottom: 1rem;
    position: relative;

    & > input,
    & > textarea,
    & > label {
        padding: #{$input-btn-padding-y} #{$input-btn-padding-x};
    }

    & > label {
        border-radius: .25rem;
        border: 1px solid transparent;
        color: $body-color;
        display: block;
        left: 0;
        line-height: $line-height-base;
        margin-bottom: 0; /* Override default `<label>` margin */
        pointer-events: none;
        position: absolute;
        top: 0;
        transition: all .1s ease-in-out;
        width: 100%;
    }

    & > input,
    & > textarea {
        &::-webkit-input-placeholder {
            color: transparent;
        }
        &::-ms-input-placeholder {
            color: transparent;
        }
        &::-moz-placeholder {
            color: transparent;
        }
        &::-moz-placeholder {
            color: transparent;
        }
        &::placeholder {
            color: transparent;
        }

        &:not(:placeholder-shown) {
            padding-bottom: calc(#{$input-btn-padding-y} / 3);
            padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-padding-y} * (2 / 3));
        }

        &:not(:placeholder-shown) ~ label {
            color: $gray-600; // $input-color;
            font-size: .8rem;
            padding-bottom: calc(#{$input-btn-padding-y} / 3);
            padding-top: calc(#{$input-btn-padding-y} / 3);
        }
    }
}