Bootstrap 4.1 floating labels

Question

I've found on Google a doc example for Bootstrap 4.1 in which they feature floating labels: getbootstrap.com/docs/4.1/examples/floating-labels/

In that page, however, it is not explained how that can be achieved, and I can't find anything in the docs for v. 4.1. Floating labels are not even listed as a new feature in the ship list.

Does anyone know if floating labels are supported?

Answer 1

It says on the Bootstrap examples page that floating-labels are...

"Experiments - Examples that focus on future-friendly features or techniques."

Like many of the other examples, there's an additional CSS file used in the example...

Using the floating-labels.css they work as expected in the supported browsers...

https://www.codeply.com/go/X9VbHqzD4B

Answer 2

Best way for me is using transform translate. It is smoother. I have added extra classes to prevent overwriting bootstraps original classes.

body{padding:75px}
.form-group.floating>label {
    bottom: 34px;
    left: 8px;
    position: relative;
    background-color: white;
    padding: 0px 5px 0px 5px;
    font-size: 1.1em;
    transition: 0.1s;
    pointer-events: none;
    font-weight: 500 !important;
    transform-origin: bottom left;
}

.form-control.floating:focus~label{
    transform: translate(1px,-85%) scale(0.80);
    opacity: .8;
    color: #005ebf;
}

.form-control.floating:valid~label{
    transform-origin: bottom left;
    transform: translate(1px,-85%) scale(0.80);
    opacity: .8;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>


<div class="form-group floating">
<input type="text" class="form-control floating" id="usr" required value="">
<label for="usr">Username</label>
</div>